Embed Youtube Code Is Not Working in Html

Embed Youtube Code Is Not Working in Html

I am trying to use embed youtube code in HTML but when I press play button it say "This video is unavailable". I am using the following HTML code for it:

<iframe width="560" height="315" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Can anyone help me out with this? I have tried other embed youtube videos too, still says same thing. I am using Chrome.

3

4 Answers

I had the same issue recently and it had nothing to do with video owners embedding settings. Apparently YouTube forbids embedding some videos in a localhost environment without a public domain, but your video can be embedded with no issue whatsoever through a public domain/subdomain: Replace the src value in the JSFiddle from @PStarczewski's answer with your video link and it will work properly.

2

For me this was caused by a referrer policy "no-referrer" on my site. Youtube seems to block embedding when no-referrer is set.

Hope to save someone from wasting time with this crap.

5

TL;DR

Youtube allows only https pages to stream with embeds/iframes.

Make sure that embeds are allowed by the video owner.

Set a less restrictive referrer policy such as "no-referrer-when-downgrade" in order to allow youtube to know the origin of the request. In django you can do this by adding following line in settings.py

SECURE_REFERRER_POLICY = "no-referrer-when-downgrade"

Long read:

If you are facing this in django application recently, it could because of the recent change in referrer policy in django 3. Read more here

When you add an iframe for a youtube video (given that the video owner allows embeds), the referrer (the host origin where the video is being played) is sent to youtube, by the scripts inside the iframe (the embed url gets a new page which brings all the required scripts). If the server is setting a referrer policy which prevents the communication about the referrer, youtube rejects the play request and responds with 204 - no content.

Starting from django v3.x, the referrer policy is set to "same-origin" by default which is too restrictive to let youtube know about the origin. In this case, youtube does not allow the video playback and responds with code 204.

This can be resolved by setting a less restrictive referrer policy. You can use "no-referrer-when-downgrade". In django, you can set this with the following variable in settings.py file.

SECURE_REFERRER_POLICY = "no-referrer-when-downgrade"

The above policy states that referrer will be sent as empty when the access protocol is downgraded, else the origin will be sent as referrer (which is acceptable). Given that, youtube only allows https origins, for this case it means that if the iframe is embedded in a webpage with https, the referrer will be sent properly and should not cause issues while playing youtube videos through such embeds.

3

On YouTube there is so called "embed settings" where owner of the video can decide whether or not to allow for it.

Here is an example: JSFiddle

<iframe width="560" height="315" src="" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
<iframe width="560" height="315" src="" frameborder="0" gesture="media" allow="autoplay; encrypted-media" allowfullscreen></iframe>

And here you can find more details about this: YouTube Restrict embedding

2
Robert Thorne
Author

Robert Thorne

Robert Thorne covers electric vehicle innovations, autonomous driving systems, global mobility trends, and automotive engineering developments.