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

Casey Roberts
Casey Roberts
1,064 Points

YouTube Embedding

I cannot get the youtube video to display while following the HTML embedding video. I know it's probably something simple, but I cannot figure this out!

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>My Page</title>
    </head>

    <body>
        <object width="560" height="315"><param name="movie" value="//www.youtube.com/v/gSaH1yaRkzI?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/gSaH1yaRkzI?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
    </body>
</html>
Adam Moore
Adam Moore
15,825 Points

Is that the embed code that YouTube gave you or did you try and write it out by hand?

To embed YouTube videos the easiest way is to grab their code provided below the video. Usually this will be in the form of an iframe now, unless you specify to use older code.

Casey Roberts
Casey Roberts
1,064 Points

I copy and pasted the code. The video specifies to make sure "use older code" is checked before copying it, but I've tried both old and the iframe with the same results. It's just showing a blank webpage. I'm totally confused and not moving forward until I figure this out!

4 Answers

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/

Try this instead <iframe width="560" height="315" src="//www.youtube.com/embed/gSaH1yaRkzI" frameborder="0" allowfullscreen></iframe>

Adam Moore
Adam Moore
15,825 Points

Casey Roberts - what's the url of the YouTube video you're trying to use?

Casey Roberts
Casey Roberts
1,064 Points

http://www.youtube.com/watch?v=_OBlgSz8sSM

This is the one the video uses, but I've tried 2 or 3 videos and none work.

Adam Moore
Adam Moore
15,825 Points

Yeah. Very strange. Tried to add the embed code with the old object code and didn't work as well.... What was the reason you had to use the old code instead of the newer iframe code?

Wilt Chaimberlain
STAFF
Wilt Chaimberlain
Treehouse Guest Teacher

Are you working from a file on your local computer, or on your desktop? If so, your code looks fine to me. It should run fine when running from a web server. But if the HTML file's still on your computer, most web browsers won't load Flash content from the web to local files.

Casey Roberts
Casey Roberts
1,064 Points

Yes, it is on my local computer. I don't have access to a web server, so I can't try it out. The video didn't say anything about that, so I had no idea! Thank you for the clearing that up!

Wilt Chaimberlain
Wilt Chaimberlain
Treehouse Guest Teacher

You bet!

What video were you watching, by the way? Something here on the site? Just want to make sure we're not missing an explanation somewhere!

Casey Roberts
Casey Roberts
1,064 Points

Yes, it's in the deep dives HTML section: http://teamtreehouse.com/library/websites/html/objects/embedded-elements

If something small like that is left out, its totally understandable. I am very pleased with the material so far. Keep up the awesome work you guys are doing!