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

HTML

Frankie Lamar
Frankie Lamar
11,120 Points
Posted by Frankie Lamar
Frankie Lamar
11,120 Points

trouble with adding video

I'm trying to display a youtube video on my html5 site, but is doesn't seem to be working. Here is my code:<!doctype html>

<html lang = "en"> <head> <meta charset="utf=8"> <title>Top Shelf Squeeky Door</title> <link rel= "stylesheet" type= "text/css" href= "application.css">

</head>
<body>
    <div id = "nav">
        <h1>Top Shelf</h1>
    </div>
    <div>
        <ul>
            <li><a href ="index.html">Home</a></li>
            <li><a href = "Artist.html">Artists</a></li>
            <li><a href = "media.html">Media</a></li>
            <li><a href = "downloads.html">Downloads</a></li>
            <li><a href = "contact.html">Contact</a></li>
        </ul>
    </div>
    <div id= "aboutmedi">
        <p> introduce your videos here.</P>
        </div>
    <video>
        <iframe width="420" height="315" src="//www.youtube.com/embed/QKhGZfXxjPw" frameborder="0" allowfullscreen></iframe>
    </video>




</body>

</html> I'm coding this using sublime text 2. I am opening the html file with chrome. I can see the links, but there video is not showing. What am I doing wrong? How do I fix this?

3 Answers

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

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/

Paul Graham
Paul Graham
1,396 Points

Right, nice call, I figured when he said website it was already online. I've done the same thing myself a half dozen times before.

Paul Graham
Paul Graham
1,396 Points
Paul Graham
Paul Graham
1,396 Points

You have no reason to use the video element when embedding an iframe, in fact it's the 100% wrong thing to do. iframe literally embeds and entire HTML document inside another. It's not a video, it's another website. Try deleting it and see what happens.

Frankie Lamar
Frankie Lamar
11,120 Points
Frankie Lamar
Frankie Lamar
11,120 Points

I removed the video tags, added http, and cleared browser. Bam! When I reopened page there was my video. You guys rock. Thank you!