Since the YouTube API has no means of programmatically triggering fullscreen (apparently for good reasons, relating to legacy Flash support, as described here), I'm getting by just by using the HTML5 Element.requestFullscreen API to fullscreen the player IFrame.
Unfortunately, if a user triggers fullscreen in the YouTube player, then the player itself goes fullscreen instead of the IFrame, and doesn't produce any events to signal that it has done so. That breaks my UI and causes other synchronization problems when the rest of the application doesn't know what things are and are not fullscreen anymore. A partial solution is to use the chromeless player and then render my own player controls, so that users can't click the YouTube fullscreen button- but, it turns out that double clicking on a YouTube video will also cause it to enter fullscreen mode, again with no way of signalling the rest of the application that it has done so.
So, is there any consistent way of preventing an embedded YouTube player from going fullscreen under any circumstances, without impacting other functionality?
The best solution I have so far is to set pointer-events:none on the iframe. That's not quite perfect, however, as it also makes it impossible to dismiss ad banners displayed over YouTube videos. An ideal solution would block the "fullscreen on double-click" response, without messing up anything else. (Single-click to play, for example, is just fine, because the YouTube player does emit play events that let me keep the rest of the application in-sync.)
When embedding using the iframe tag, you can use the parameter fs = "0" to disable to the fullscreen button. See http://codepen.io/anon/pen/zvOqKJ
There is something weird going on with this. I was unable to prevent fullscreen when I passed in "fs: 0" with the playerVars as per this page
https://developers.google.com/youtube/player_parameters?playerVersion=HTML5
(even though some other player vars were making a difference)
God knows what's wrong, but I fixed it with:
var ourYT = document.getElementById('player');
ourYT.allowFullscreen = false;
Use this;
iframe {pointer-events: none;}
you can disabling click events on youtube player (play,pause,fullscreen);
Related
I'm looking for a way to mute sound or block it from unauthorized sources,
The problem is that Google Ads is randomly playing videos in ads (very annoying)
For example, I want users to be able to play videos on my web site (I can add a special ID to these allowed elements or data-allowed-element).
I'm wonder if I can hookup to a browser sound event or detect when sound is playing - JavaScript?
Any ideas?
No there is currently no way to detect this browser independent! - There is no event or something else.
Furthermore i dont know exactly how the Google Ads works. I think they are running in an iframe or something which make it harder to detect/mute it.
But may it runns within an audio or video tag, so you can may mute it using the following post. But be careful - You have to mute the video and audio tags within the Google Ads iframe and not within your main window, because then you will have no effect.
https://stackoverflow.com/a/14045788/4275911
Is it possible to make an external play button for a video without the play button in the video?
For example when you want to start a youtube video you see a red button in the middle of it. I want that hidden and a button outside of the video to start the video. It doesn't matter what video player it is.
I want to do this because iPad does not allow autoplay. And using the external button I want to trick it to autoplay.
This is a website that does "autoplay" on the iPad.
http://24hoursofhappy.com/
There is a reason why YouTube doesn't allow autoplay on mobile/tablet devices, video's use up alot of bandwith which may become expensive for the user.
U can trick it like u mentioned with a custom play button or even force it to start playing without a custom button. There is alot of detailed information on YouTube's API page.
Check out this page: https://developers.google.com/youtube/
I'd refrain from always autoplaying a video though if not just for bandwith reasons. In your case u could check if the device is a tablet.
I finally found an answer for this using HTML5 videos. It allows me to use the control buttons externally so I can use an overlay and hide the overlay when the play button is clicked so it will seem like it is auot played.
When I set up a youtube player in an iframe in the normal way ( like this https://developers.google.com/youtube/youtube_player_demo ), and make a new html element (button) positioned over the top of youtube's iframe, any touch of the video player seems to be "caught" by the video controls so the user cannot tap the button I've made.
Removing the controls with the parameter "controls=0" solves the problem, and the user is able to tap the button. However, I need to find a way around this whilst leaving the controls on - at the moment the only option I can see is building my own controls overlay on top, which is not desirable. The fact that youtube seem to be able to grab and not grab the touch interaction would seem to prove that it is possible in some way with the JavaScript.
-not a problem on Android tablets.
Thanks in advance to anyone who can help!
According to this other SO post, limitations exist on iOS, where "...embedded media cannot be played automatically/programatically in Safari on iOS - the user always initiates playback."
I am creating an iPad app for running YouTube video using IFrame.
I referred to many questions regarding YouTube integration in UIWebView and understand that:
Autoplay is not possible
Apple doesn't allow to run video without user interaction (starting).
In my simple app, I have a JavaScript button in the first page, and in the next page integrated YouTube with IFrame.
If I click on the JavaScript button, is there any way to pass this click event to the next page for running YouTube?
Is event bubbling in HTML helps this?
As far as I know no, you can't do anything about it. Event triggering can be easily simulated (some example) without user interaction which can't work on iOS devices (because of the policy you mentioned).
iOS video tag (used by YouTube in this case) is handled by iOS browser. Mobile version is showing placeholder with play button which you need to 'tap'. And only this action can play the video. Notice that you can't even overlay video tag with anything, because it will simply not work.
So I've run into some problems implementing YouTube videos in popovers. I can get the YouTube video to play just fine, but when the user clicks off the popover (destroying it), the sound continues playing. My solution for this was to have the webview that was displaying the youtube video load a blank html string in the viewDidDisappear method, and this works great.
However, I am now running into an issue where if the user pushes the fullscreen button on the youtube video, the youtube video does indeed go fullscreen, but the popover is in front of it. This is annoying, but the user could normally just click some other portion of the screen and it goes away. I would be willing to live with this. Except of course.....that calls viewDidDisappear, loading nothing into the html, blowing up my entire application.
I was wondering if anyone knew how to load some javascript in the webview that could control the youtube video. In this way, I could have viedDidDiappear call the pause, so the sound would not continue playing when the popover is dismissed, and the youtube video would not blow up in full screen.
This is not the ideal solution (since the popover still sits in the way in full screen), but I will take it for now. If anyone could help with the javascript injection I would need, or suggest an even better solution, I would greatly appreciate it.