I am testing out some simple HTML5 code in order to play embedded YouTube videos in a browser. However, some videos (almost exclusively music videos) will not play in the browser. Instead, a error message stating "This video is unavailable appears" (as shown here).
This is the HTML code used to display the video:
<iframe width="560" height="315" src="https://www.youtube.com/embed/oGpFcHTxjZs" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
which is the exact code generated by YouTube when selecting their "Embed" option.
The iframe tag does work for some videos, however, as shown here:
<iframe width="560" height="315" src="https://www.youtube.com/embed/jxvPjuREDpE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
What is strange is that all types of embedded videos seem to work in an environment such as jsfiddle, but not when loading a separate HTML file into a browser.
A similar issue was asked here: "This video is unavailable" when putting music videos in iFrame , but is only resolved by running an http server, which is a completely new topic to me.
Does anyone know of an HTML/javscript fix to this issue? Thanks in advance.
I recently came across this as well. An interesting thing that I noticed is that the video becomes unavailable if the origin is not http(s).
So try this: create a local file server or upload the html file to somewhere and if you access the file from http protocol, the video will play.
since some days my vimeo iframe will not autoplay anymore. I know the chrome update, which will block autoplay videos with sound. Is the block already active?
The Vimeo Example code doesn't work:
<iframe src="https://player.vimeo.com/video/12345?autoplay=1&loop=1&autopause=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
But netflix.com and vimeo itself has an autoplay video on the homepage, which works.
EDIT: Chrome version 66.0.3359.139 macOS High Sierra 10.13.4
Does anyone have an idea or answer?
Thanks!
Annotating the <iframe> with an allow attribute worked for me:
<iframe ... allow="autoplay; fullscreen"></iframe>
It's called "Iframe delegation" and is described here: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes.
You need to add &muted=1 to the iFrame src path and you need to add the attribute allow="autoplay" to the iFrame. Now the Vimeo video starts automatically again in Chrome.
yes, according to their documentation it is.
https://help.vimeo.com/hc/en-us/articles/115004485728-Autoplaying-and-looping-embedded-videos
EDIT:
Advance browsers like FireFox, Chrome and Safari are now blocking video autoplay by default.
CHROME Auto-Play Policy:
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
The Media Engagement Index, or MEI for short, a way of Chrome is to allow AutoPlay audio on your page to be based on your previous interactions with this webpage as a user. You can see what this looks like by going to
chrome://media-engagement/
MEI is calculated per user profile, and is persisted to incognito mode.
WEBKIT/SAFARI Auto-Play Policy:
https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/
FIREFOX Auto-Play Improvements:
https://www.ghacks.net/2018/09/21/firefox-improved-autoplay-blocking/
NOTE:
Don’t assume a media element will play, and don’t show the pause button from the start. Look at the Promise returned by the play function on HTMLMediaElement to see if it was rejected:
var promise = document.querySelector('video').play();
if (promise !== undefined) {
promise.catch(error => {
// Auto-play was prevented
// Show a UI element to let the user manually start playback
}).then(() => {
// Auto-play started
});
}
Autoplay + Mute + Start at time x sec =
<div>
<iframe src="https://player.vimeo.com/video/342787403?&autoplay=1&loop=1&title=0&byline=0&portrait=0&muted=1&#t=235s" style="position:absolute;top:0;left:0;width:100%;height:100%;" width="1400" height="900" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>
#t parameter must be the last one.
Now the autoplay video just works if the audio is muted, you need to add the muted parameter into your api or iframe code &muted=1, you can change your browser preferences to allow autoplay unmuted videos:
chrome://flags/#autoplay-policy
Change the default option to "No user gesture is required"
If the user clicks the video you can unmuted it!!
If you are paid member and want to use video as a background, this is probably what you need:
?background=1: This parameter automatically disables all elements in the player (play bar, buttons, etc), autoplays, loops, and mutes your video on load. Please note: the background parameter is only supported for videos hosted by paid members. Learn more here.
Or, if you are not:
?muted=1 This parameter will automatically mute your video on load. Once your video plays, viewers can manually un-mute by clicking on the volume bar within the player.
BUT, I still can't make it work on the phone.
muted parameter fixed my issue:
<iframe src="https://player.vimeo.com/video/xbackground=1&autoplay=1&loop=1&byline=0&title=0&muted=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="autoplay; fullscreen"></iframe>
I have just learned that YouTube live stream URL is randomly changing. I found this on stackoverflow "YouTube Live Streaming embed code keeps changing"
so I know the the static embed link is this https://www.youtube.com/embed/live_stream?channel=[channel ID]
What I would like know is how to add autoplay=1 to the embed link and any other functions like this.
30/7/2017 Update - this method does not work on ios V10.3.3 tested on an iPhone 6+ the player crashes safari and chrome !
It's really simple, just add the parameter autoplay=1 at the end:
https://www.youtube.com/embed/live_stream?channel=[channel ID]&autoplay=1
allow autoplay and add it to the end of the embed src.
<iframe width="560" height="315" src="https://www.youtube.com/embed/ldy3VEPIRk0?autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
I need to embed a video in my project and I need to have a code for that so that it do not display any suggested videos at the end, and I need it it to be autoplayed when the page launches.
This is the URL of the video
Can I get help in this please?
just uncheck the box that has "suggested videos" and then copy and paste the code and it should work fine. Have a Blessed day.
Try this
<iframe width="560" height="315" src="http://www.youtube.com/embed/1WCxuHDfyUo?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
I have taken the following iframe code for the youtube video from the youtube itself.
<iframe width=”560? height=”315? src=”http://www.youtube.com/embed/V3oJR5IAMxM” frameborder=”0? allowfullscreen></iframe>
But when i try to embed this video on simple web-page inside a div element. I can see the you-tube player in the web page.But the video is not loading in my webpage. But the same video is playing for me in youtube.
Can someone tell what might be the problem,..
Is the problem with a code or with the browser, i am using mozilla 13.
HiTbmBizz,
Try this instead,
<iframe width="640" height="360" src="http://www.youtube.com/embed/V3oJR5IAMxM?feature=player_embedded" frameborder="0" allowfullscreen></iframe>
Worked for me in HTMLSandbox if you want to test.
Let me know how it goes.