want to display youtube play button for ios and cannot - javascript

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.

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

Embed video programmatic js fullscreen button

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.

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 !

Loading JW Player on a hidden element

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.

Flowplayer breaks when resize with css FireFox

I am using flowplayer and I created some html buttons which change things on the player. One of the things I do is change the size of the player when you hit the button. I have achieved that by just giving it a new class name which has its own css styling.
This works in IE7 and 8, chrome, safari, opera but in FireFox I am having problems.
whenever the resize button is clicked the player seems to reload and go back to the beginning.
flowplayer($('.player').children('.video').attr('id'), {src: 'js/flowplayer-3.2.7.swf',wmode: 'opaque', allowfullscreen: false}, {
clip: {
},
plugins: {
controls: null
},
play: { opacity: 0 }
});
When you press the button I call my function which looks like this just adding a new class and removing the old
function changeSize(){
$('.player').removeClass('FSMODE');
$('.player').addClass('videoplayer');
},
After much testing I have found the problem, this applies to firefox only it seems.
After flowplayer is loaded with the initial css you apply to it, any changes to after that to css position, overflow, and display will cause the player to reload.
Hope this helps someone

Categories