34

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="https://www.youtube.com/embed/JfJYHfrOGgQ" 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.

enter image description here

snoob dogg
  • 2,491
  • 3
  • 31
  • 54
Pearl Oyun
  • 361
  • 1
  • 3
  • 5
  • 4
    It may be the owners of the videos you're embedding have disabled embedding. – Mitya Jul 19 '18 at 14:01
  • 1
    It is working, otherwise you would not even see the youtube player. – Seblor Jul 19 '18 at 14:01
  • 1
    yeah, I do see the youtube player, when i try to play the video it says this video is unavailable. I tried so many embed youtube, it cant be that all videos I am choosing disabled embedding by the owners. – Pearl Oyun Jul 19 '18 at 14:09

7 Answers7

42

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.

Cyrille
  • 3,427
  • 1
  • 30
  • 32
Ahmed Maher
  • 1,521
  • 17
  • 22
  • 3
    @Pearl Oyun , kindly consider marking my answer as accepted if it qualifies as such , thank you – Ahmed Maher Sep 03 '19 at 14:35
  • 2
    Thank you! This helped me identify the issue and I was able to find a more descriptive answer here: https://stackoverflow.com/questions/51969269/embedded-youtube-video-doesnt-work-on-local-server – Mitch Feb 07 '20 at 00:27
25

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.

c1u31355
  • 420
  • 5
  • 10
  • wasn't enough for me – Vincent Alex Feb 15 '20 at 19:03
  • @VincentAlex I'm sorry to hear that, but I reproduced the referrer thing on multiple servers with different yt sources - and there is no specific error message for - which is kinda misleading. So I think this hint could be useful for someone searching for a reason for "This video is unavailable", although of course there are other possible reasons which could cause the error. – c1u31355 Feb 16 '20 at 20:38
  • Found the answer, we must access the html file via a domain name, not locally C:/. Youtube has a domain white listing. – Vincent Alex Feb 17 '20 at 21:14
  • @VincentAlex Not really, can you please check this link https://www.youtube.com/embed/6CerdjvePsg there is no other domain its youtube's embed url event if its not playing this video. But playing in youtube https://www.youtube.com/watch?v=6CerdjvePsg&feature=youtu.be – Ritesh Khatri Jun 29 '20 at 12:11
  • This was the correct fix in my case. I was running helmet on a nodejs server and it sets the referrer policy to "no-referrer" by default, causing some videos to show the "Video is unavailable" message. – Copripop Mar 31 '22 at 11:33
  • How do you changed the policy in the iframe? – Washington Guedes Sep 22 '22 at 15:50
  • @WashingtonGuedes you could try – c1u31355 Sep 22 '22 at 16:07
  • Thanks, I have used `referrerpolicy="origin"` and also changed the src to always match the pattern `https://www.youtube-nocookie.com/embed/${code}` and it is working now even in localhost – Washington Guedes Sep 22 '22 at 17:03
19

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.

Dharman
  • 30,962
  • 25
  • 85
  • 135
Sushrut Kasture
  • 311
  • 5
  • 10
  • 2
    I've been searching everywhere how to fix my problem and this solved my problem sooooo well. Damn. – justbecause Apr 22 '21 at 19:26
  • 4
    You can also use `referrerpolicy` attribute on ` – Infensus Aug 28 '21 at 08:56
  • 1
    I did `SECURE_REFERRER_POLICY = "strict-origin-when-cross-origin"` in settings.py and it worked. :) This setting is also the default for chromium based browsers so less concern on security. – Sumit Kumar Mar 02 '22 at 17:29
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="https://www.youtube.com/embed/videoseries?list=PLsyvDWwjkTqtOmqAiTzzfHspTAztB-udL" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/JfJYHfrOGgQ" frameborder="0" gesture="media" allow="autoplay; encrypted-media" allowfullscreen></iframe>

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

PStarczewski
  • 479
  • 2
  • 17
1

The problem I had was that my YouTube video was stuck loading when I embedded it. But if I logged out from my YouTube account, then it started to work. I hope this is a temporary bug YouTube will fix soon.

Peppe L-G
  • 7,351
  • 2
  • 25
  • 50
0

In my case the video was playing fine on my localhost but was showing unavailable when played from the remote server. Turns out it was happening because of this HTTP header: Referrer-Policy: no-referrer.

Removing Referrer-Policy: no-referrer HTTP header solved the problem for me.

Almost took me 15 minutes to solve it!

Tahsin Khan
  • 61
  • 3
0

Riffing off of other answers: In my case I just had to add referrerpolicy="no-referrer-when-downgrade" to my iframe and it worked as outlined here:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy

Example with OP code:

<iframe width="560" height="315" src="https://www.youtube.com/embed/JfJYHfrOGgQ" referrerpolicy="no-referrer-when-downgrade" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Bryant
  • 156
  • 2
  • 7