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

Posted by Micol Bellantoni
Micol Bellantoni
3,061 Points

Embed a YouTube code

I try to incorporate a youtube embedded code in the body of my page but it doesn't work, when I charge my page it leave only a big white space and no video.

4 Answers

James Barnett
James Barnett
39,199 Points

Micol Bellantoni -

I'm going to take a guess here are you trying to embed a YouTube video 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/

Amanda Groover
Amanda Groover
2,396 Points

Yeah, I'm following the HTML deep dive, just have my index.html and such in a folder on my desktop. Wasn't sure why the step for embedding a youtube video wasn't working! This fixed it!

Elaine Ryan
Elaine Ryan
6,771 Points

Thanks - fixed the code (added http: in two places in the embed code generated by Youtube) and it worked like a charm.

Elaine Ryan
Elaine Ryan
6,771 Points

Thanks - fixed the code (added http: in two places in the embed code generated by Youtube) and it worked like a charm.

Adam Sackfield
PLUS
Adam Sackfield
Courses Plus Student 19,663 Points
Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Could you show us your code please just add it to a codepen or jsfiddle.

Thanks

Micol Bellantoni
Micol Bellantoni
3,061 Points

'''<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My page</title> </head> <body> <h1>Cupcake Company</h1> <p>This is a beautiful cupcake...</p> <img src ="img/logo.gif" alt="Cupcake Logo"> <p>..isn't it?</p> <p>Sweet Cupcakes for sweet people</p> <a href="another_page.html">My Link</a><br> <a href="http://google.com">Take me to Google!</a> <object width="560" height="315"><param name="movie" value="//www.youtube.com/v/qBIvITjmMmw?version=3&amp;hl=it_IT"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/qBIvITjmMmw?version=3&amp;hl=it_IT" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>

</body> </html>'''

Cheryl Hurley
Cheryl Hurley
2,250 Points
Cheryl Hurley
Cheryl Hurley
2,250 Points

This is not working for me, either. I included the http: protocol in each of the URLs located in the embed code. I've never had a problem with this before and don't anticipate doing much "real" work without a web server, but I'd really like to understand how to fix this and why I'm still having troubles! Here's a jsfiddle with the entire example HTML page created in the Embedded Elements video: http://jsfiddle.net/knpeX/

James Barnett
James Barnett
39,199 Points

It turns out YouTube gives a different URL in the embed code from the share button Youtube embed code, while both URLs work in your browser only the one URL generated by the share button will work for embedding.

You used this one:

https://www.youtube.com/watch?v=_OBlgSz8sSM?version=3&amp;hl=en_US

The embed code has this one:

//www.youtube.com/v/_OBlgSz8sSM?hl=en_US&amp;version=3&amp;rel=0

Excepting the obvious difference of the protocol in the URL, there's another important difference in the URL

/watch?v= vs /v/

So I made that one small change, the video in your jsfiddle worked just fine.

Micol Bellantoni
Micol Bellantoni
3,061 Points

Thank you!I sow your profile you have a lot of points!Congratulations!From when are you here?

Cheryl Hurley
Cheryl Hurley
2,250 Points

Thank you! I swear I tried adding in the protocol before re-pasting the link but must not have. That was so frustrating! Thank you for your informative replies - I am extremely new to "coding" via file so watching out for these things is important!

Micol Bellantoni
Micol Bellantoni
3,061 Points
Micol Bellantoni
Micol Bellantoni
3,061 Points

Thank you people!You are very kind!