Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

My YouTube video wont show in iframe

Here is the code I entered in my HTML

<iframe width="640" height="360" src="https://www.youtube.com/watch?v=ZwKhufmMxko">
</iframe>

The video frame will show, but the actual video won't load or even show up. I have tried waiting, so it shouldn't be a loading issue.

I also am currently only using HTML and CSS

Any ideas on how I can get this to work?

like image 969
jdavid Avatar asked Mar 31 '16 15:03

jdavid


People also ask

How do I display a YouTube video in iframe?

On a computer, go to the YouTube video or playlist you want to embed. From the list of Share options, click Embed. From the box that appears, copy the HTML code. Paste the code into your website HTML.

Why is my YouTube video not embedding?

If you receive the error message, "Embedding disabled on request” ,you have probably accidentally disabled embedding via YouTube. To grant permission again, follow these steps: Go to “Video Manager.” Select the appropriate video and click “Edit”.

Can we play YouTube video in HTML video tag?

HTML object tagYou can embed youtube video in html without iframe tag. You can use HTML object tag to embed multimedia (like audio, video, Java applets, ActiveX, PDF, and Flash) in your web pages.

How do I get an iframe video?

To embed a video in an HTML page, use the <iframe> element. The source attribute included the video URL. For the dimensions of the video player, set the width and height of the video appropriately. The Video URL is the video embed link.


2 Answers

YouTube doesn't allow 3rd parties to embed their site directly like that. Using

<iframe width="640" height="360" src="https://www.youtube.com/watch?v=ZwKhufmMxko">
</iframe>

will raise an error Refused to display 'https://www.youtube.com/watch?v=ZwKhufmMxko' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'. to indicate this (you should really check the console for these things).

Fortunately Youtube offers the "embed video" option, which you need to use in order to embed videos.

Your linked video for example would produce the iframe code:

<iframe width="560" height="315" src="https://www.youtube.com/embed/ZwKhufmMxko" frameborder="0" allowfullscreen></iframe>
like image 200
apokryfos Avatar answered Oct 25 '22 03:10

apokryfos


Change watch?v= to embed/

The easiest way to get the correct link is to right-click on the YouTube video and select copy embed code.

<iframe width="854" height="480" src="https://www.youtube.com/embed/ZwKhufmMxko" frameborder="0" allowfullscreen></iframe>
like image 35
user3467534 Avatar answered Oct 25 '22 03:10

user3467534