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

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

Elena Paraschiv
Elena Paraschiv
9,938 Points
Posted by Elena Paraschiv
Elena Paraschiv
9,938 Points

Video Modal not working. Need some help

<!-- 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" data-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 -->

Triggering Image 

              <a data-toggle="modal" href="#videoModal">
                <img class="img-responsive img-rounded" src="img/thumb_ribbit.jpg" >
              </a>

2 Answers

Adam Hill
Adam Hill
7,492 Points
Adam Hill
Adam Hill
7,492 Points

Without seeing all of the html, CSS and JavaScript, my only suggestion is to check the path to your CSS and js is correct (a misplaced or missing / can make the difference between CSS and JavaScript loading or not). Also use your browser tools, specifically the console, it will tell you if a file you think you're loading isn't being found be by the browser.

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Instead of using the regular HTML href attribute of the link element surrounding the image, use the data-target attribute so Bootstrap knows which element to trigger the modal on. You would still use the #videoModal as the value:

              <a data-toggle="modal" data-target="#videoModal">
                <img class="img-responsive img-rounded" src="img/thumb_ribbit.jpg" >
              </a>