I'm embedding Youtube's experimental HTML5 iframe capabilities in a website through use of the javascript API:
YouTube Player API Reference for <ifram> Embeds
I'm aware of the z-index issues this brings about, and the fix that involves adding wmode=opaque (or wmode=transparent) to the iframe url:
Fixed. My Youtube iframe z-index is ignored and is above a fixed div
When just using the javascript API, how do you set wmode to opaque:
function onYouTubePlayerAPIReady() {
var player;
player = new YT.Player('player', {
width: 1280,
height: 720,
videoId: 'u1zgFlCw8Aw',
// if I try adding wmode: opaque here, it breaks
playerVars: {
controls: 0,
showinfo: 0 ,
modestbranding: 1
// if I try adding wmode: opaque as a playerVar here, it breaks
},
events: {
'onReady': onPlayerReady,
'onPlaybackQualityChange': onPlayerPlaybackQualityChange
}
});
}
Any ideas?
Hmmmm...
Well, it appears I was hasty in posting the question. It appears that the correct form for setting wmode within the API is:
function onYouTubePlayerAPIReady() {
var player;
player = new YT.Player('player', {
width: 1280,
height: 720,
videoId: 'u1zgFlCw8Aw',
playerVars: {
controls: 0,
showinfo: 0 ,
modestbranding: 1,
wmode: "opaque"
},
events: {
'onReady': onPlayerReady,
'onPlaybackQualityChange': onPlayerPlaybackQualityChange
}
});
}
Hopefully this helps someone else.
As far as I can tell it is the default to be opaque. I tested changing wmode to transparent, opaque and removed it. When it wasn't specified it was automatically set to opaque.
I'm not sure if this always was the case, but it definitely is now.
Also remember this only applies when using the Flash player. You can disable the HTML 5 player to test this which is the default with the 'Disable Youtube™ HTML5 Player' plugin. Then just inspect element and drill down till you find the EMBED tag.
Related
I posted the YouTube API and a video on my site a few days ago. I have set some PlayerVars. Everything worked then. Unfortunately, I noticed today that the player is not working properly anymore. All the PlayerVars are set in the iframe link, but they will not be executed (for example, 'showinfo': 0 will still display the video info). What can this be? Even if I remove all the changes I made since putting the video online, it will not work properly again.
HTML:
<div id="aboutVideoVideo"></div>
JavaScript:
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('aboutVideoVideo', {
height: '100%',
width: '100%',
videoId: 'xxx_xx',
playerVars: {
'showinfo': 0,
'disablekb': 1,
'fs': 0,
'iv_load_policy': 3,
'modestbranding': 1,
'rel': 0
},
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
event.target.pauseVideo();
event.target.unMute();
}
iframe result:
<iframe id="aboutVideoVideo" frameborder="0" allowfullscreen="1" allow="autoplay; encrypted-media" title="YouTube video player" width="100%" height="100%" src="https://www.youtube.com/embed/xxx_xx?showinfo=0&disablekb=1&fs=0&iv_load_policy=3&modestbranding=1&rel=0&enablejsapi=1&origin=http%3A%2F%2Fxxx.xxx.xxx.xxx&widgetid=1"></iframe>
There has been a recent change in the Youtube embed API. Showinfo parameter has been depreciated. The video title, avatar, watch later and share icons will be displayed on loading, mouseover and when paused. So showinfo=0 doesn't work anymore.
There's also a change in the rel parameter.
I would like to remove volume control on videojs player.
Anyway, when the user click on fullscreen, thevolume control must appear again.
So I want to remove volume control only when the player is not on fullscreen. Is it possible in videojs?
const videoplayer = videojs('video-player', {
controlBar: {
'pictureInPictureToggle': false,
'volumePanel': false,
}
});
video.js uses styles for states such as fullscreen, so you can control this with CSS:
.video-js .vjs-volume-menu-button {
display:none;
}
.video-js.vjs-fullscreen .vjs-volume-menu-button {
display:block;
}
USING VIDEO.JS in Adobe Muse
Currently I have poster image configured to display at beginning of video,
when video has concluded I'd like the poster image to re-appear. Thanks for any help!
In the future the best way to do this will be through css. I just added an issue for it.
.video-js.vjs-ended .vjs-poster {
display: block;
}
For now there's two ways using javascript that should work.
var myPlayer = videojs(myId);
myPlayer.on('ended', function(){
this.posterImage.show();
});
// or
myPlayer.on('ended', function(){
this.trigger('loadstart');
});
You'll want to test both for your specific use case.
This worked for me! Video JS 6.6
var video_player;
$(document).ready(function()
{
// 'videoplayer' is the ID of our <video> tag
videojs("my-video", {}, function()
{
video_player = this;
video_player.on('ended', function()
{
video_player.posterImage.show();
$(this.posterImage.contentEl()).show();
$(this.bigPlayButton.contentEl()).show();
video_player.currentTime(0);
video_player.controlBar.hide();
video_player.bigPlayButton.show();
video_player.cancelFullScreen();
});
video_player.on('play', function()
{
video_player.posterImage.hide();
video_player.controlBar.show();
video_player.bigPlayButton.hide();
});
});
});
You should use the following as specified here
var player = videojs('#example_video_1', {}, function() {
this.on('ended', function() {
player.exitFullscreen();
player.hasStarted(false);
});
});
For video.js version 7.8.1 in 2020, following #chukwuma-nwaugha answer, I ended up with this:
var options = {};
var player = videojs('example_video_1', options, function onPlayerReady() {
this.on('ended', function() {
if (player.isFullscreen()) {
player.exitFullscreen();
}
player.hasStarted(false);
});
});
This worked for me:
/* Show poster when paused or stopped */
.video-js.vjs-default-skin.vjs-paused .vjs-poster {
display:none !important;
}
.video-js.vjs-default-skin.vjs-ended .vjs-poster {display:block !important;}
I am using VideoJS 5.12.6. None of the solutions above worked for me. I ended up using:
myPlayer.on('ended', function(){
$('body .vjs-poster').fadeIn();
});
I upvoted #heff's reply following the downvote as CSS is working in July 2018.
After the class:
.vjs-has-started .vjs-poster {
display: none;
}
Add the class:
vjs-ended .vjs-poster {
display: inline-block;
}
That will restore the poster to its default visible state. The vjs-ended class must come after the vjs-has-started class unless you want to increase the class specificity.
This is working for me on two separate projects. I love the way Video.js allows me to do so much in CSS without having to struggle with JavaScript.
You can use css to display poster image :
.video-js.vjs-ended .vjs-poster {
display: block;
}
Please note : you must remove poster attribute from html video tag :
<video id="my-video" style="position: unset"
class="video-js vjs-theme-fantasy"
controls
preload="auto"
poster="MY_VIDEO_POSTER.jpg"
data-setup="{}">
To be like that :
<video id="my-video" style="position: unset"
class="video-js vjs-theme-fantasy"
controls
preload="auto"
data-setup="{}">
I'm trying to hide a video while it's loading (e.g. the black window with just a loading spinner). The only class I've found that sort of made sense is the .vjs-has-started one but the loading screen still shows with the following CSS. I also didn't see anything in the javascript api that meets this need (sorry if I missed something).
.video-js {
display: none;
visibility: hidden;
}
.video-js.vjs-has-started {
display: block;
visibility: visible;
}
I've also tried adding .vjs-playing into the mix both in place of an in conjunction with .vjs-has-started. Any thoughts on getting this to work or a answer about why it won't currently would help. If I need to I can work on adding this to video.js if it's not already there but I first wanted to get your definitive answer on the current state of video.js for this functionality.
I added the vjs-waiting class to be able to accomplish this now vjs-waiting can be used in css to show and hide the content see the pull-request for more details.
Example:
.vjs-waiting {
visibility: hidden;
background: transparent;
}
.vjs-loading-spinner {
display: none !important;
}
Reference - https://github.com/videojs/video.js/pull/1351
You could use the vjs-waiting
.vjs-waiting {visibility: hidden;}
Hey I have been struggling with this too, Docs are not intuitive at all!
Im implementing Video JS in React Hooks, so I solved with loadingSpinner set to false;
useEffect(() => {
let player = videojs('my-player',{
autoplay: 'muted',
sources: [
{
src: videoUrl, // m3u8 format
type: "application/x-mpegURL"
}
],
controlBar: false,
loadingSpinner: false
});
player.play()
return () => {
player.dispose()
}
}, [])
Hope it helps! =)
I am trying to load a Youtube video in the home page (Chromeless) useing JavaScript API.
So far I managed to make it auto play, hd720 and fadeOut the video once it is finished.
But I can't find a way to remove controls, hide info and not to load related video at the end.
I know in iframe embed I can use below parameters
controls=0&showinfo=0&autoplay=1&rel=0
But I can't find way to use these parameters in YouTube Player API shown below.
Any suggestion?
<script src="http://www.youtube.com/player_api?enablejsapi=1&version=3"></script>
function onYouTubePlayerAPIReady() {
player = new YT.Player('video_chromeless', {
height: '800',
width: '450',
videoId: '',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event){
player.setPlaybackQuality('hd720');
event.target.playVideo();
}
function onPlayerStateChange(event) {
if(event.data === 0) {
$('#video_chromeless').fadeOut(600);
}
}
You can set 'playerVars' in the second parameter of "YT.Player":
https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player
This works fine for me:
player = new YT.Player('divId', {
videoId : videoSrc,
playerVars: {
'autoplay': 0,
'controls': 1,
'rel' : 0,
'fs' : 0,
}
});
YouTube updated their policy.
After September 25, 2018, "showinfo" parameter is deprecated and ignored from iframe.
https://developers.google.com/youtube/player_parameters#release_notes_08_23_2018
According to the latest policy update of YouTube, we will no longer be able to hide the related videos using rel:0 flag.
you can see the rel flag got changed from 25th sept 2018
You can refer to this link for latest parameters of YouTubeAPI
To hide the controls
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'nYAsTBpyWto',
playerVars: {
controls: 0,
disablekb: 1
},
...