I am trying to hide related videos that shows up when you pause a video but as I found out from similar questions that as of September 25th 2018 there is no way to disable the related videos from displaying.
The effect of the change is that you will not be able to disable
related videos. However, you will have the option of specifying that
the related videos shown in the player should be from the same channel
as the video that was just played.
To be more specific:
Prior to the change, if the parameter's value is set to 0, then the
player does not show related videos. After the change, if the rel
parameter is set to 0, the player will show related videos that are
from the same channel as the video that was just played.
Here is the JSFiddle.
Also the parameter showinfo=0 dosen't work anymore which was used to hide the video title, watch later button and the share button. It is deprecated as of September 25, 2018 but somehow KhanAcademy is still able to hide those including the related videos. Are they using a different API?
Hiding the related videos altogether like Khan Academy does or overlaying a thumbnail on top to hide the related videos will work for me.
So I found an open source player which does hide all the related videos including the title, the share and watch later button.
The player name is Plyr.
HTML:
<div class="plyr__video-embed" id="player">
<iframe src="https://www.youtube.com/embed/9C1leq--_wM??origin=https://plyr.io&iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1" allowfullscreen allowtransparency allow="autoplay"></iframe>
</div>
You can initialize it with:
const player = new Plyr('#player', {});
// Expose player so it can be used from the console
window.player = player;
CSS to hide the related videos:
.plyr__video-embed iframe {
top: -50%;
height: 200%;
}
Here's the JSFiddle. It's working perfectly for me.
From September 25, 2018 youtube has changed their API. So, you can't disable the related videos but you can specify a list that can be shown.
https://developers.google.com/youtube/player_parameters#rel
I already tried all possible answers provided below You can try the code here:https://jsfiddle.net/ibrth/0zx7o6rs/62/ and https://jsfiddle.net/ibrth/z9tk1q3r/
function onYouTubeIframeAPIReady() {
player = new YT.Player('video-placeholder', {
width: 600,
height: 400,
videoId: '0sDg2h3M1RE',
playerVars: {
color: 'white',
playlist: 'taJ60kskkns,FG0fTKAqZ5g',
rel:0,
enablejsapi:1,
modestbranding: 1, showinfo: 0, ecver: 2
},
events: {
onReady: initialize
}
});
}
I found the answer here:
Youtube Javascript API - disable related videos and
https://webmasters.stackexchange.com/questions/102974/how-to-remove-the-related-videos-at-end-of-youtube-embedded-video
Related
I use React to set iframe with youtube video on page in correct size. All works well but for mobiles doesn't work autoplay option.
What is interesting for page, what I have as example video it works perfect.
<iframe type="text/html" allowTransparency="true" height="100%" width="100%" preload="metadata" gesture="media" allow="encrypted-media" className="autoplay-iframe"
src={`https://www.youtube.com/embed/`+this.props.autoplay+`?autoplay=1&version=3&html5=1&hd=1&controls=0&loop=1&playlist=`+this.props.autoplay+`&playsinline=1&rel=0&showinfo=0&modestbranding=1&related=0&enablejsapi=1&origin=`+window.location.hostname} frameborder="0"></iframe>
above is my iframe code.
I cut some part of iframe code but there are just style in styles attribute. It isn't important for autoplay.
The same finally url for other page works. I'm not sure why. Any hints how I can solve this problem?
Thanks in advance.
You will not be able to implement this, since it is intentionally disabled to all mobile devices. The reason is for the user to save cellular data. It is also cited in this post.
The reason that video autoplay doesn’t work is simple. The feature is
deliberately disabled in both iOS and Android for mobile devices.
The reason this is done is to save mobile users money. Such devices
(especially mobile phones) often use data connections that charge by
bandwidth. They have data limits and going over results in a fee.
This statement was also supported with the following SO post.
no autoplay in iframe HTML5 player on mobile (Android Chrome and Firefox)?
how to get embedded youtube video to autostart on iphone
Youtube autoplay not working on mobile devices with embedded HTML5 player
I was able to get Youtube videos to play (without muting them). Because loading Youtube videos inline was upsetting Google and their new Core Web Vitals, we implemented a thumbnail placeholder that when clicked (jQuery) initiates loading the video using the Youtube Iframe API. I too could not get them to autoplay at first. The issue was resolved by having the API embed the Iframe--not putting the iframe in place before hand. It autoplays on iOS Safari, Chrome and Firefox. Here's what worked for me:
On document ready:
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady(yt_id, iframe_id, iframe_width, iframe_height){
player = new YT.Player(iframe_id, {
width: iframe_width,
height: iframe_height,
videoId: yt_id,
playerVars: { 'autoplay': 1, 'playsinline': 1 },
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
//event.target.mute();
event.target.setVolume(70);
event.target.playVideo();
}
on click event:
$('.yt_video_link').on('click', function(e) {
e.preventDefault();
var div_id = $(this).attr('id');
var div_iframe = div_id + '_iframe';
var yt_id = $('#' + div_id).data('ytid');
$('#' + div_id + ' .yt_video_play').css('display', 'none');
onYouTubeIframeAPIReady(yt_id, div_iframe, 560, 315);
});
HTML:
<div id='yt_video_desktop' class='yt_video_link mobile_hide' data-ytid='<?=$yt_id?>'>
<div id='yt_video_desktop_player' class='yt_video'>
<img src='/catalog/images/yt_video_thumb_<?=$yt_id?>.jpg' alt='play desktop video' width='768' height='432' id='yt_video_desktop_iframe'>
</div>
<div class='yt_video_play'></div>
</div>
Google official statement "Due to this restriction, functions and parameters such as autoplay, playVideo(), loadVideoById() won't work in all mobile environments.
Reference: https://developers.google.com/youtube/iframe_api_reference
By adding the parameter playsinline: 1 I managed to make the autoplay work on android and ios.
createYoutubePlayer() {
this.youtubePlayer = new YT.Player('youtubePlayer', {
videoId: 'YOURID', // YouTube Video ID
width: 277, // Player width (in px)
height: 600, // Player height (in px)
playerVars: {
autoplay: 1, // Auto-play the video on load
controls: 0, // Show pause/play buttons in player
showinfo: 1, // Hide the video title
modestbranding: 1, // Hide the Youtube Logo
loop: 1, // Run the video in a loop
fs: 0, // Hide the full screen button
cc_load_policy: 0, // Hide closed captions
iv_load_policy: 3, // Hide the Video Annotations
autohide: 1, // Hide video controls when playing
playsinline: 1, //forbid fullscreen on ios
},
events: {
onReady: (e) => {
e.target.mute();
},
onStateChange: (e) => {this.onPlayerStateChange(e)}
}
});
}
The rules have changed so most new mobiles will now let you autoplay, but most video streaming sites like youtube and vimeo haven't enabled the functionality yet. The reason the html5 video worked but the iframe didn't is because youtube disabled it.
For anyone dealing with this on react native, you can override the user agent and it works like a charm:
<WebView
userAgent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36"
...
The reason that video autoplay doesn't work is simple. The feature is deliberately disabled in both iOS and Android for mobile devices. The reason this is done is to save mobile users money. Such devices (especially mobile phones) often use data connections that charge by bandwidth.
So I hide my embed youtube video controls:
var player = new YT.Player('player', {
playerVars: {
controls: 0,
showinfo: 0,
modestbranding: 1,
autohide: 1,
iv_load_policy: 3,
rel: 0
}
});
But I still can open make the video full screen by double-clicking the video, which is fine.
Actually, I'd also like to have a custom button to make the player full screen.
I could actually make the iframe#player full screen, or use one of these strategies but I'd much rather have a native way to do it, which means actually calling the method that is called on a double click on the video.
Any chance I can do that? The doc doesn't seem to talk about it explicitly, and inspecting the player JS var did not give me much success either.
I am trying to use the DailyMotion Embed API in order to play a video on iOS. I have disabled the chrome, because I have custom controls. This works perfectly fine on desktop and other mobile devices, but not on iOS. This has to do with iOS not allowing JS triggering of video playback. However, I need to be able to somehow start the DailyMotion video either through an event or through DailyMotion's embedded iframe (For example, Youtube has a large red play button). I am hoping not to have to disable my custom controls just to get the video to start playing on iOS.
I have made a fiddle with the code: http://jsfiddle.net/recqfww6/
$(function() {
DM.init();
embedPlayer = DM.player($('#embed-player')[0], {
video: 'x2f5zar',
width: '100%',
height: '100%',
params: {
'api': 1,
'autoplay': 0,
'chromeless': 1,
'background': '000000',
'html': 1,
'id': 'embed-player',
'info': 0,
'logo': 1,
'related': 0,
'webkit-playsinline': 1
}
});
$('#play_btn').on('click', function() {
embedPlayer.play();
});
});
You can try playing that on Desktop and then using this link to play on iOS:
https://jsfiddle.net/recqfww6/embedded/result/
When clicking the button on iOS, DailyMotion shows a loading icon, but never loads.
Thanks for any help!
This is something we're working on. The new version of our player is coming soon, stay tuned !
I am using the youtube iframe javascript api, and my videos are not playing in ios7. I've noticed that there is a play button within the iframe which is hidden by youtube's own stylesheets (or rather, set to a height and width of 1px !important). If I use safari's debugger with the ios7 simulator to remove these styles, the play button is visible, and when clicked, allows the video to play in ios.
The problem is, I cannot write a style in my stylesheets which overrides this behavior! How can I solve this issue? Attached is a screenshot of the offending style, and below is my code to initiate the player:
var videoOptions = {
'controls': 0,
'playsinline' : 1,
'showinfo': 0,
'html5':1,
'modestbranding': 1,
'autoplay': 0,
'rel': 0,
'enablejsapi' : 1,
//'origin': window.location.origin,
'wmode': 'opaque'
};
$scope.jsPlayer = new YT.Player('story-video-player-container', {
height: '100%',
width: '100%',
videoId: $scope.currentVideo.youtube_id,
events: {
'onReady': $scope.onPlayerReady,
'onStateChange': $scope.onPlayerStateChange,
'onPlaybackQualityChange': $scope.onPlaybackQualityChange
},
playerVars: videoOptions,
});
I've tried changing all of the videoOptions to show all controls / info / branding / etc, nothing works.
This is a known issue that Google says is "fixed" but other developers (including ourselves) insist is not. I've referenced your question there. You may want to follow this but report and add your own voice to the discussion.
At this point, this appears to be something controlled entirely on Youtube's end because it sets the size of the video tag inside the html5-video-container to 1px.
In our case, we have the iframe embedded on the page, and then a button that runs javascript to display the hidden div element so the video appears, and also trigger the YouTube API play event to make the video play (example: http://www.3708colet.com).
But Google says this is the same as "autoplay" and is disabled by iOS (it's also evidently disabled by Android Chrome--in our tests it's broken there too). Instead of playing, in iOS at least, it shows a 1px white square in the upper left corner of our container where the iframe is. And if we click that, it triggers "interaction" with the video and loads the video (doesn't work for Android). So there are no errors, but youtube's page just doesn't make that video large enough to fill the iframe area.
I'm using JW Player to show a Flash video (although it will soon have HTML5 sources where browser support allows).
Until the user takes an action on the page, the video needs to be invisible (but loaded). Once they take that action, the video div is shown and I'd like to play() the video as immediately as possible.
Here's my setup() call. <div id="video"> is hidden in my CSS file, as is JW Player's <div id="video_wrapper"> (both set to display: none; initially).
jwplayer("video").setup({
playlist: [
{
sources: [
{ file: 'http://example.com/video.flv' }
]
}
],
controls: false,
wmode: 'transparent'
});
And some time later, I'm doing this:
$('#video').show();
$('#video_wrapper').show();
jwplayer().play();
I don't get any errors in the console and the video plays fine if I don't first hide the containing divs in my CSS file.
Does JW Player not fire its setup() method on a hidden element? And, if not, how should I achieve the result I want?
See if the solution here works for you:
Unable to play audio when JWPlayer is hidden
Position the containing div so that it is no longer visible, then call the setup function on it. Your show function will have to be a little more complex to change the display settings back to how you want them to be.