Embed video programmatic js fullscreen button - javascript

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.

Related

Hide related videos Youtube Iframe API

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

How to change youtube video's player settings using javascript

I am writing a simple Chrome extension to change the speed of a video on youtube. The code can be found here.
In essence, I am using the following code to change the speed:
document.getElementsByTagName("video")[0].playbackRate = 2;
This works well, but doesn't affect the settings on the player. Which also cause some issues, especially when you switch videos.
Is there a better approach to interact directly with the player?
You may try Youtube Player API iframe embeds, Iframe API allows you to control the speed of the video.
The default playback rate is 1, which indicates that the video is playing at normal speed. Playback rates may include values like 0.25, 0.5, 1, 1.5, and 2.
Here is a sample code for Iframe API:
function onYouTubeIframeAPIReady() {
var player;
player = new YT.Player('player', {
videoId: 'M7lc1UVf-VE',
playerVars: { 'autoplay': 1, 'controls': 0 },
events: {
'onReady': function(e){
// e.target = player
e.target.setPlaybackRate(0.5); // set to half speed
e.target.playVideo(); // watch lolcats in slow motion :)
},
}
});
}

DailyMotion JS Embed API on iOS & Playing video

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 !

want to display youtube play button for ios and cannot

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.

Playback speed control for YouTube videos? HTML5?

I need to implement a video playback speed controller (e.g.: play the video at 1/2 speed) for youtube videos, and I'm thinking that HTML5 is currently the only way to do this (if it's even possible). I know very little about HTML5 video, but I know a lot about the youtube js API. Can anyone point me in the right direction? It's okay if the solution will only work in some browsers.
The new iframe api allows you to control the speed of the video:
iframe api reference: Setting the playback rate
The default playback rate is 1, which indicates that the video is playing at normal speed. Playback rates may include values like 0.25, 0.5, 1, 1.5, and 2.
Also:
Calling this function does not guarantee that the playback rate will actually change.
Example code:
function onYouTubeIframeAPIReady() {
var player;
player = new YT.Player('player', {
videoId: 'M7lc1UVf-VE',
playerVars: { 'autoplay': 1, 'controls': 0 },
events: {
'onReady': function(e){
// e.target = player
e.target.setPlaybackRate(0.5); // set to half speed
e.target.playVideo(); // watch lolcats in slow motion :)
},
}
});
}
http://mediaelementjs.com/ is crossbrowser,uses flash or html5 depending on the browser support and has all the methods you are looking for.
$('#video').playbackRate = 3.0 or
$('video').playbackRate = 3.0 depending on version

Categories