Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

General Discussion

*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

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

6 Answers

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

Hey Chris Casey,

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

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

Thanks in advance

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

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.

I'm having the same issue, Chris.

Where did you include your script?

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

THANK YOU, YOU SAVED MY LIFE.