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.

CSS Framework Basics Build a Website with Bootstrap Adding the Video Modal and Footer

Ryan Holm
seal-mask
.a{fill-rule:evenodd;}techdegree
Ryan Holm
Front End Web Development Techdegree Student 12,726 Points

Video Modal

I'm having issues getting the video to load properly. Window pops-up, video doesn't display.

Looking at the URL structure, I'm missing a question mark that treehouse has and I do not. Is this the issue? How to fix?

Thanks for your input!

Treehouse index.html?#videoModal

Me index.html#videoModal

<div class="row"> <div class="col-sm-6 hidden-xs"> <h3>Learn how to make this app for yourself</h3> <p> We will build on the concepts learned in previous iOS projects to create an app that will allow users to send photo or video messages to other users that will be deleted once viewed. </p> <div class="row th-copy"> <div class="col-sm-6"> <a data-toggle="modal" href="#videoModal"> <img class="img-responsive img-rounded" src="img/thumb_ribbit.jpg"> </a> </div> <div class="col-sm-5"> <p><em>Get access to courses for only $24 a month!</em></p> <a href="#">Visit Treehouse »</a> </div> </div> </div>

<!-- Video Modal -->
<div class="modal fade" id="videoModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" date-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Learn how to make this app!</h4>
      </div>
      <div class="modal-body">
        <iframe width="500" height="281" src"http://www.youtube.com/embed/hTf0CgRC1_Q" frameborder="0"></iframe>
      </div>
    </div>
  </div>
</div>
<!-- End Video Modal -->
Marin Gerov
Marin Gerov
28,501 Points

Hey Ryan,

Seems to me that you are missing the "=" sign after the src attribute in the iframe tag. It should be: <iframe width="500" height="281" src="http://www.youtube.com/embed/hTf0CgRC1_Q" frameborder="0"></iframe>

2 Answers

Marin Gerov
Marin Gerov
28,501 Points

Hey Ryan,

Seems to me that you are missing the "=" sign after the src attribute in the iframe tag. It should be: <iframe width="500" height="281" src="http://www.youtube.com/embed/hTf0CgRC1_Q" frameborder="0"></iframe>