Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Posted by Chris Casey
Chris Casey
2,374 Points

*Tutorial Question: Bootstrap Modal video error

I've been following the Treehouse tutorial "Building a Website with Bootstrap" which has been great. In the last stage, the tutorial covers Modal video and the Footer. After following the tutorial I get an error with the video, in Chrome it only displays half the clip: http://imgur.com/e5V1Swc and in Firefox, nothing: http://imgur.com/IpAlm85 Can anyone help with this? (it does work in IE10!)

Also, when I close the modal I can still hear the video playing in the background - any way to rectify this also?

Thanks

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Hard to help without seeing your code. Create a codepen so we can see the bigger picture.

6 Answers

Chris Casey
Chris Casey
2,374 Points
Chris Casey
Chris Casey
2,374 Points

HI James Barnett, it was like this when I downloaded the project files from the tutorial here:

http://teamtreehouse.com/library/framework-basics/build-a-website-with-bootstrap/adding-the-video-modal-and-footer

It's doing this in the Final folder created by Guil Hernandez. I'm also getting the result after following his tutorial.

Thanks

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hey Chris Casey,

I'm taking a look at the files now to see if I can replicate the issue. Thanks!

Chris Casey
Chris Casey
2,374 Points
Chris Casey
Chris Casey
2,374 Points

hi Guil Hernandez , did you find an explanation for this?

Thanks in advance

Chris Casey
Chris Casey
2,374 Points
Chris Casey
Chris Casey
2,374 Points

Guil Hernandez James Barnett

Found a remedy for this. Added a class called 'modal_vid' for the link for 'img/thumb_ribbit.jpg' and then included the below script:

 <script>
    $(".modal_vid, .close").on("click", function() {
     $(".modal-dialog iframe").attr("src", $(".modal-dialog iframe").attr("src")); 
    });
  </script>
Chris Dziewa
Chris Dziewa
17,781 Points
Chris Dziewa
Chris Dziewa
17,781 Points

Thanks for this Chris. This fixed the continuous sound in Chrome after closing but every once in a while the script makes the video load with part of it cut off. Also did you get firefox to work? Mine has always shown the video but when I click play, nothing happens.

Paul Edwards
Paul Edwards
325 Points
Paul Edwards
Paul Edwards
325 Points

I'm having the same issue, Chris.

Where did you include your script?

Paul Edwards
Paul Edwards
325 Points
Paul Edwards
Paul Edwards
325 Points

I found this solution but in involves changing the bootstrap.css file directly.

http://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal

My video works well now and sits correctly in the window but it still continues to play once the modal window has been closed. Did you manage to find a fix for that?

Jeesun Kim
Jeesun Kim
4,866 Points
Jeesun Kim
Jeesun Kim
4,866 Points

THANK YOU, YOU SAVED MY LIFE.