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.

HTML

ryanandrews
ryanandrews
7,822 Points

Bootstrap Framework - Video Modals

I need the help of this wonderful Treehouse community once again. Building my site with bootstrap and I am using the Video Modals as shown by Guil, but I can't seem to get my videos to play. The addresses work, I have copy and pasted directly from the embed section of youtube. My modal windows open and I get an error stating that my embed code is not correct. I am at a loss, suggestions, thoughts, comments. Thanks, here is my code for my video modal.

<div class="modal fade" id="videoModalone">
      <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">BC Winegrowers Series</h4>
          </div>
          <div class="modal-body">
            <iframe width="550" height="350" src="//www.youtube.com/embed/mwuPTI8AT7M?rel=0" frameborder="0"></iframe>
          </div>
        </div>
      </div>
    </div>   

2 Answers

ryanandrews
ryanandrews
7,822 Points

Ok Perfect! They are up and running, I learn something everyday. Thanks Shivam.

James Barnett
James Barnett
39,199 Points

If you are trying to do this in an html file on your computer that doesn't a web server.

If that's the case ...

Protocol-less URLs don't work without a web server, so in that case just add http: in front of the URL.


> The main caveat to keep in mind when using the protocol-less reference is that it will fail on pages loaded via file:/// (i.e. HTML pages you load directly from disk to your browser). So, do be sure to include the http: protocol in the URL if you happen to be developing without a web server at all, but don’t worry about omitting it otherwise.

source: http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/

ryanandrews
ryanandrews
7,822 Points

Hi Shivam, I tried that before with no luck. I get the same message with and without the // -

"File not found

Firefox can't find the file at /Users/Patch/Documents/Work Projects/BootstrapEVK/www.youtube.com/embed/mwuPTI8AT7M?rel=0."

What am I missing here?

Thanks for your help

Shivam Bhalla
Shivam Bhalla
Courses Plus Student 5,035 Points

Your browser thinks you are using a relative path. Use the HTTP protocol in your url and it should fix the problem. So your src URL should be:

www.youtube.com/embed/mwuPTI8AT7M?rel=0