I am using the Youtube iframe api to show a custom thumbnail and play button over an embedded video. It is working everywhere (including android) except for iOS, where I get "If playback doesn't begin shortly, try restarting your device" behind the thumbnail. If I hide the thumbnail, I can play the video using Youtube's play button (before using my controls) and the html5 play button (after using my controls)
I am aware of the restriction on autoplaying videos, but this should get around that because it is triggered by a click handler, and works on android which has the same restriction
function loadVideo(videoID, title, description, thumbUrl, waitPlay) {
var playBtn = jQuery(".playerThumb");
jQuery(".playerTitle").text(title);
jQuery(".playerDesc").text(description);
jQuery(".playerEmbed").replaceWith("<div id='video' class='playerEmbed'></div>");
playBtn.css("background-image", "url(" + thumbUrl + ")").show().off('click').removeClass("ready");
jQuery("html, body").animate({ scrollTop: 0 }, 400, "swing", function(){});
ytPlayer = new YT.Player('video', {
videoId: videoID,
playerVars: {
rel: 0,
showinfo: 0,
autoplay: (waitPlay === true ? 0 : 1)
},
events: {
'onReady': onReady,
'onError': function(e){console.error(e);},
'onStateChange': function(e){if (e.data == YT.PlayerState.PLAYING) jQuery(".playerThumb").fadeOut();}
}
});
function onReady(e) {
playBtn.click(function() {ytPlayer.playVideo();}).addClass("ready");
if (waitPlay !== true) {
if (ytPlayer.getPlayerState() == YT.PlayerState.PLAYING) {
playBtn.hide();
}
}
}
}
How can I get this to work on iOS? Is my only option to just use the default play button for iOS?
Had the same issue and found the solution.
It turns out that on iOS you can't overlay the youtube video with any div, the user needs to click directly on the youtube iframe for the video to start.
Related
With slick.js, I am able to pause a playing YouTube video after advancing to the next slide.
However, I can't figure out how to pause the slider's autoplay function (slickPause) on the slider itself while the video is playing.
Then, resume autoplay on the slider only after the video has finished or when the user advances to a different slide.
Please help!
(function($) {
jQuery(document).ready(function($) {
$(".hero-slider").on("beforeChange", function(event, slick) {
var currentSlide, slideType, player, command;
currentSlide = $(slick.$slider).find(".slick-current");
slideType = currentSlide.attr("class").split(" ")[1];
player = currentSlide.find("iframe").get(0);
if (slideType == "vimeo") {
command = {
"method": "pause",
"value": "true"
};
} else {
command = {
"event": "command",
"func": "pauseVideo",
"args": ""
};
}
if (player != undefined) {
player.contentWindow.postMessage(JSON.stringify(command), "*");
}
});
$(".hero-slider").slick({
infinite: true,
arrows: true,
dots: false,
fade: true,
cssEase: 'linear',
autoplay: true,
autoplaySpeed: 5000,
focusOnSelect: true
});
});
})(jQuery);
You may refer with this sample code. You can use slickPause like this:
$('.hero-slider').click(function() {
$('.hero-slider').slick('slickPause');
});
Also, here are some references which might help:
Slick-carousel - How To Pause and Play embedded Youtube videos on slide Change?
Slick-carousel how to stop autoplay when video is on via youtube api
I use youtube iframe api for embedding some videos. I observe that at the end of the video, api displays some thumbnails/videos (as recommendations) for next watch.
How can I disable that? I want it to be blank or can I customize? I do something like this:
function onYouTubeIframeAPIReady() {
player = new YT.Player('player1', {
height: YTPlayerHeight,
width: YTPlayerWidth,
playerVars: { 'autoplay': 1, 'showinfo' : 0, controls: 0 },
videoId: firstVideoId,
events: {
'onReady': onReady,
'onStateChange': onPlayerStateChange
}
});
}
Pleas help
Setting rel: 0 as one of the playerVars will disable the end screen. All of the supported parameters are listed in the documentation.
Just setting parameter - related: false
Video autoplay (including YouTubes autoplay=1) does not work on iOS Safari. That is thourougly documented by both Apple and a large number of blog posts.
This does however cause a problem with using custom controls for YouTube videos, that I can't find a definate yes/no answer for anywhere.
If I used a simple HTML5 video tag there would be no issue - but I would really rather not have to encode all the videos for all the different platforms.
What I need to accomplish is:
A cover image is shown (flat PNG with a play icon on top).
The user clicks the cover image, the image is replaced by a YouTube video that starts playing.
This is not autoplay from the users perspective, since it is initiated by a click. However on all non-Flash devices YouTube embeds are displayed in an iframe, causing the video to effectively be loaded and autoplayed (or at least, I think so).
Does anyone know of any workarounds for this problem?
This snippet illustrates the problem. It works in e.g. FireFox, but on iOS Safari it simple shows the loading indicator and then ends in a black screen.
If I add the "apple-mobile-web-app-capable" meta tag and fire up the site from the home screen, the videos play correctly.
<div id="movieContainer" style="width: 768px; height: 432px; border: 1px solid #cccccc;">Initializing player API...</div>
<div id="status">Initializing player API...</div>
<button onclick="player.playVideo();">Play</button>
<script>
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var playerAPIIsLoaded = false;
function onYouTubePlayerAPIReady()
{
playerAPIIsLoaded = true;
document.getElementById("status").innerHTML = "Player API initialized!";
}
var player = null;
function initMovie()
{
document.getElementById("status").innerHTML = "Loading video..."
player = new YT.Player(
'movieContainer',
{
height: '432'
, width: '768'
, playerVars: { 'autoplay': 0, 'controls': 2, 'rel': 0, 'showinfo': 0 }
, videoId: 'MwnZr4VJQPQ'
, events: { 'onReady': function (event) { document.getElementById("status").innerHTML = "Video loaded!";/*event.target.playVideo();*/ } }
}
);
}
window.onload = initMovie;
</script>
With IFrame API, whether a video is played with html5 container or flash container depends on a lot of factors. I'm wondering: is it possible to set some parameter or call a function to force the player to be flash(or html5)?
besides, rel=0 seems not work in Iframe API, when I set it to 0, the related videos are still shown, is there something wrong with my code? thanks!
player = new YT.Player('player', {
height: '300', //720
width: '400', //1280
videoId: 'S2Rgr6yuuXQ',
playerVars: { 'rel': 0 }, // or rel: 0, rel: '0', all don't work
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange,
'onError': onErrorDetected,
'onPlaybackQualityChange': onQualityChange
}
});
I think that the iframe option does not include a parameter to select html5 or flash option , because the iframe API uses the best option automatically.
you can try to specify to use HTML5 if available:
Force HTML5 youtube video
YouTube video in HTML5
and you can use the SWFObject option to use only the flash player in the client (if the client supports flash ..)
Using playerVars: { html5: 1 } loads an iframe with a html5=1 attribute in the src, similar to Force HTML5 youtube video.
Replace
playerVars: { 'rel': 0 }
with
playerVars: { 'rel': '0' }
I have seen this script to auto-mute video's from youtube embedded on a site:
How do I automatically play a Youtube video (IFrame API) muted?
The code is available on fiddle:
http://jsfiddle.net/9RjzU/3/
However I would like to know what to add to this code to prevent related videos appearing?
Thanks
Azzam
In your situation, all that is needed is to add 'rel': 0 to the PlayerVars parameters, like so:
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
playerVars: {
'autoplay': 1,
'controls': 1,
'autohide': 1,
'wmode': 'opaque',
'rel': 0
},
videoId: 'JW5meKfy3fY',
events: { 'onReady': onPlayerReady }
});
}
You might also be interested in the full list of parameters available for the YouTube iframe API, found here: https://developers.google.com/youtube/player_parameters#Parameters