Is there a way to with the youtube api to hide the player controls when the user hovers out?
I current have the code when a user clicks it plays:
$("#container.click-to-play-video").click(function(){
player = new YT.Player('player', {
width : '960',
height : '600',
videoId : 'PnHCKXe6ttU',
playerVars: { 'autoplay': 1 , 'controls': 0 },
events : {
'onReady' : onPlayerReady,
'onStateChange' : onPlayerStateChange
}
});
});
But I only want the controls to play when the user enters with the mouse. Is it possible?
There is a player parameter "autohide" (docs: https://developers.google.com/youtube/player_parameters#autohide) which determines if the controls will hide during playback.
Setting that parameter to "1" will allow the controls to slide out of view when the video is playing and the user stops hovering over the video, which I believe is what you want to achieve.
You cannot force the controls to slide in or out at specific moments through code, or change the player parameters (such as the 'controls' parameter) once the player is created.
If you need very precise control over the display of the controls, then you would need to set controls=0 and create your own set of controls for the video.
Related
I have embedded a youtube video in my HTML page. Since the video screen size is too small, the hover effect on the progress bar is getting cropped.
How can I stop this hover effect on the progress bar?
There is no option to disable the thumbnail preview in YouTube's native embed players. But you can disable the player controls altogether by appending ?controls=0 to the embed URL.
Here is an example, <iframe width='340' height='200' src="https://www.youtube.com/embed/MpGLUVbqoYQ?controls=0"></iframe>
the previous comment has it right. if youre using the API with javascript it might be best to use it like this:
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'videoId',
playerVars: {
'controls': 0
}
});
}
I'm trying to play a youtube video in my iOS app using "YTPlayerView".
My aim is to play video in fullscreen, don't show any controls, and close it on the first tap to the screen.
If I play video inline, everything works properly, but in fullscreen control-bars appear. However, if I close fullscreen with its button (on the bottom right), controls disappear.
var playerVars = [AnyHashable : Any]()
playerVars["enablejsapi"] = 1
playerVars["rel"] = 0
playerVars["fs"] = 0
playerVars["controls"] = 0
playerVars["iv_load_policy"] = 3
playerVars["modestbranding"] = 1
playerVars["playsinline"] = 0
playerVars["showinfo"] = 0
self.playerView.load(withVideoId: videoId, playerVars: playerVars)
Any help will be very appreciated to solve this issue.
Image about full screen with control-bars
"rel" and "info" depricated. Try this -
"playsinline"
This parameter controls whether videos play inline or fullscreen in an HTML5 player on iOS. Valid values are:
0: This value causes fullscreen playback. This is currently the default value, though the default is subject to change.
1: This value causes inline playback for UIWebViews created with the allowsInlineMediaPlayback property set to TRUE.
As question suggested i want to hide the play/Pause button from "Youtube" player.
I am using
https://github.com/youtube/youtube-ios-player-helper
and setting the playerVars parameter like this:
let playerVars = [
"controls" : 0,
"playsinline" : 1,
"autohide" : 0,
"showinfo" : 0,
"modestbranding" : 0
]
The three parameters I found useful are:
showinfo=0
controls=0
autohide=1
showinfo=0 makes sure the video does not display the title on the top of the video frame.
controls=0 hides the bottom bar with the play button, volume, etc.
autohide=1 hides the controls until you hover over them, which is probably the most useful.
All the official docs are here.
But you can use embed with custom CSS to hide or adjust he location of the Play button.
button.ytp-large-play-button.ytp-button {
display: none;
}
I am using the Youtube iframe api to show a custom thumbnail and play button over an embedded video. It is working everywhere (including android) except for iOS, where I get "If playback doesn't begin shortly, try restarting your device" behind the thumbnail. If I hide the thumbnail, I can play the video using Youtube's play button (before using my controls) and the html5 play button (after using my controls)
I am aware of the restriction on autoplaying videos, but this should get around that because it is triggered by a click handler, and works on android which has the same restriction
function loadVideo(videoID, title, description, thumbUrl, waitPlay) {
var playBtn = jQuery(".playerThumb");
jQuery(".playerTitle").text(title);
jQuery(".playerDesc").text(description);
jQuery(".playerEmbed").replaceWith("<div id='video' class='playerEmbed'></div>");
playBtn.css("background-image", "url(" + thumbUrl + ")").show().off('click').removeClass("ready");
jQuery("html, body").animate({ scrollTop: 0 }, 400, "swing", function(){});
ytPlayer = new YT.Player('video', {
videoId: videoID,
playerVars: {
rel: 0,
showinfo: 0,
autoplay: (waitPlay === true ? 0 : 1)
},
events: {
'onReady': onReady,
'onError': function(e){console.error(e);},
'onStateChange': function(e){if (e.data == YT.PlayerState.PLAYING) jQuery(".playerThumb").fadeOut();}
}
});
function onReady(e) {
playBtn.click(function() {ytPlayer.playVideo();}).addClass("ready");
if (waitPlay !== true) {
if (ytPlayer.getPlayerState() == YT.PlayerState.PLAYING) {
playBtn.hide();
}
}
}
}
How can I get this to work on iOS? Is my only option to just use the default play button for iOS?
Had the same issue and found the solution.
It turns out that on iOS you can't overlay the youtube video with any div, the user needs to click directly on the youtube iframe for the video to start.
I would like to use Greasemonkey to access some API objects of youtube videos while I'm in fullscreen mode.
It could be useful to have mouse clicks and position relative to screen.
This, to detect fullscreen mode, doesn't work:
window.fullScreen
I tried also to add mouse event detection to yt player, with this:
var player = document.getElementById('movie_player');
player.addEventListener("click", interceptClicks,true);
but it doesn't fire that func.
I tried also to inject some code like this:
function GM_main () {
var playerNode = document.getElementById ("movie_player");
playerNode.addEventListener ('click', interceptClicks ,false);
}
addJS_Node (null, null, GM_main);
function addJS_Node (text, s_URL, funcToRun, runOnLoad) {
var D = document;
var scriptNode = D.createElement ('script');
if (runOnLoad) {
scriptNode.addEventListener ("load", runOnLoad, false);
}
scriptNode.type = "text/javascript";
if (text) scriptNode.textContent = text;
if (s_URL) scriptNode.src = s_URL;
if (funcToRun) scriptNode.textContent = '(' + funcToRun.toString() + ')()';
var targ = D.getElementsByTagName ('head')[0] || D.body || D.documentElement;
targ.appendChild (scriptNode);
}
I tried also to make a:
window.addEventListener('click', interceptClicks, false);
This works, BUT only in all areas different from the youtube flash player in non-fullscreen mode and in fullscreen mode, obviously none area, as there is only the player visible...
EDIT:
I made a partial progress indeed.
I created a button element with
btn.addEventListener("click", function () { player.mozRequestFullScreen();}, false)
This way flash video enters in Firefox fullscreen mode and so it receives the wheel events fired by the
window.addEventlistener('DOMMouseScroll', .....etc)
Besides, the fullscreen mode is detected by
window.fullScreen
Also, all keys (event) are detectable, but ESC; not again the mouse clicks..
There is a drawback:
Once in fullscreen, SOMETIMES if you click the left mouse button it suddenly exits fullscreen mode... SOMETIMES instead it stays normally full...
To exit it's not sufficient to press ESC, you need to press the normal flash fullscreen button on the lower right + ESC.
Some rare times it blocks itself in Fullscreen mode and you can't exit. You should press ctrl+alt+canc and then it appears firefox "block script" dialog box.
Why that odd behaviour and how to prevent it?
Ideally the best should be: intercept mouse click on the lower right flash fullscreen button, block it, redirect the call to mozFullscreen and block the fullscreen mode until you press ESC.
But I dont' think it's possible, is it?