I'm trying to get a Youtube video to play automatically when a user clicks this link:
<a class="videoLink" href="//www.youtube.com/watch?v=CBg_G-_zOf0&rel=0&autoplay=1" rel="lightbox"></a>
This opens and displays the video in a lightbox (I am using SwipeBox) but does not autoplay the video.
The '&rel=0' works fine, no suggested videos are shown after the video (it will not work if I use '?rel=0'). But the '&autoplay=1' does not work at all. I have tried using '?autoplay=1' but that gives me a JSON error (something to do with having multiple "?'s" in the URL).
This is the code of the YouTube video when it is open within the lightbox:
<iframe width="560" height="315" src="//www.youtube.com/embed/CBg_G-_zOf0?rel=0&autoplay=0" frameborder="0" allowfullscreen=""></iframe>
As you can see, the 'autoplay' is set to '0' which is no good. If I change the value to '1' in developer tools the video refreshes and automatically plays as expected.
Any suggestions on how I could possibly force the autoplay value in the iframe to be 1 would be awesome.
Related
Just need some advice. I have a homepage where I have 3 Vimeo videos added in a slider (page shows different video after refresh).
This slows down the page, and also the videos look fuzzy on the screen, sometimes lagging. They need to be looped, and can not add any click event on it (I was think about the lazyloading but can not work with that as the video needs to be looping constantly).
Do we have any better option for embedding vimeo videos?
I have the following code:
<iframe allow="autoplay; fullscreen" allowfullscreen="" frameborder="0" height="950" src="https://player.vimeo.com/video/753826918?h=431b8314ba&autoplay=1&loop=1&autopause=0&muted=1&background=1" width="100%"></iframe>
Any other suggestions how the videos could be loaded/embedded on the page so it will speed up the loading time? Thank you.
I got this problem for almost 1 week without any solution working.
I have an ReactApp use iframe tag to play youtube video.
The request is to click another tag (such as thumbnail) then video will be played instead of clicking directly to iframe.
Thumbnail have z-index = 2; iframe z-index = 1. When click thumbnail, thumnail will be hidden (display=none).
I can do this by add '?autoplay=1&mute=1' to youtube embed url when click the thumbnail. This works well on desktop. BUT Because youtube not allow autoplay on mobile/tablet so user must click twice for video to play, first click on thumbnail, the next click on iframe.
Is there a way so that use can only click once on thumbnail then theo video will auto play?
My website have different domain with youtube so any way like accessing element inside iframe are not allowed.
This task should be completed with only vanilla javascript/typescript only. We don't prefer using third party like react-player because these player will impact app performance.
Below is codes similar to the real project. I would appreciate to any advice as I am really exhausted with this :)))
<div id="container">
<div id="thumbnail"></div>
<iframe width="1280" height="720" src="https://www.youtube.com/embed/9xwazD5SyVg?autoplay=1&mute=1" title="Dummy Video For YouTube API Test" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
I am using IFrame Player API
to play youtube videos in my website.when user clicks a particular link it popups a lightbox and plays video automatically.In Desktop it works fine,and in ios I understand why doesn't it work (they already mentioned why), but for android chrome its not working.Is autoplay was disabled also in andorid browsers? Please enlighten me.
This link seems to answer most of your questions:
YouTube iframe embeds cannot autoplay on Android
But in short, it seems like autoplay has been disabled on Chrome for Android so you need to treat it in the same way as iOS and use a user interaction to trigger the play.
Update: There's a more affirmative information that it has been disabled here: https://developers.google.com/web/updates/2016/07/autoplay#why_the_change
It will play however if you set it to autoplay in a muted state.
A solution I've just been working on for autoplaying would be to instantiate the player with an empty video on page load:
var player = new YT.Player('yt-media-player', {
height: height,
width: width,
videoId: ''
});
Then on the click event of opening the lightbox you can load the particular video and call it to play:
player.loadVideoById(youtubeId);
player.playVideo();
I would like to build an iOS app that plays youtube videos within a UIWebView window, with the UIWebView window being user selected to either play directly on the iOS device, or via AirPlay onto an AppleTV.
The website displayed in the UIWebView is my own website and will have javascript that will signal back-and-forth to the app when the youtube video ends (using the iframe api for youtube).
Question: Is the above possible?
Specifically, the iOS docs show that I need to have in the html within the UIWebView:
<video src="myPlaylist.m3u8"
height="300" width="400"
x-webkit-airplay="allow" >
<embed airplay="allow"
src="movie.mov"
width=400
height=300
mime-type="video/quicktime">
</embed>
</video>
But with YouTube iFrame api I do not have access to the < video > tag so how do I make the AirPlay icon visible to the user on the UIWebView window?
Thank you for any direction anyone can provide.
Jim
UIWebView uses it's own movie player controller to play embedded videos. It offers a setting to allow AirPlay:
[_webView setMediaPlaybackAllowsAirPlay:YES];
When set to YES, you'll get the familiar AirPlay icon when the movie plays.
A YouTube iframe can play a video using an HTML5 player instead of Flash, by adding "html5=1" as a URL parameter. However, this only works sometimes. For example the emebeds below are identical, except for the YouTube id in the iframe URL. The first iframe plays fine if there is no Flash player installed but the second requires flash. I've tried this in both Chrome and Firefox.
<iframe title="YouTube video player" width="720" height="720" src="http://www.youtube.com/embed/O_ceIIJeVNQ?html5=1&modestbranding=1&controls=0&title&loop=1&playlist=O_ceIIJeVNQ&enablejsapi=1&origin=http%3A%2F%2Flocalhost%3A8080"></iframe>
<iframe title="YouTube video player" width="720" height="720" src="http://www.youtube.com/embed/YmehSeNXXt4?html5=1&modestbranding=1&controls=0&title&loop=1&playlist=YmehSeNXXt4&enablejsapi=1&origin=http%3A%2F%2Flocalhost%3A8080"></iframe>
http://jsfiddle.net/judeosborn/2SAas
Any idea how I can get embeds to play in HTML5 consistently?
#Jude Osborn
"Apparently HTML5 video will not play for videos with ads, captions, or annotations"
That is impossible, the biggest part of youtube videos will have ads captions or notations
if it was true Youtube would be dead soon.
The fact that one video will play and the other not
is probably caused by if a version exists that is available
in the right format...which might depend on how old it is.
They dont convert videos on the fly..but create various versions
and send the right one to the right browser or device.
It should be that the new(er) embed code as shown below videos #Youtube
takes care of sending the right video to you.
By the way NONE of the PLAYLISTS will play anymore on iOS (iPad/iPhone)
i noticed that today, no replies are given in any yt-forum
Single videos play fine.
A colleague of mine found the answer in the original HTML5 video post announcement here:
http://youtube-global.blogspot.co.uk/2010/01/introducing-youtube-html5-supported.html
Apparently HTML5 video will not play for videos with ads, captions, or annotations.