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;
}
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.
i am using the youtube-ios-player-helper. I'm setting the playerVars parameter like this:
let playerVars = [
"controls" : 0,
"playsinline" : 0,
"autohide" : 2,
"showinfo" : 0,
"modestbranding" : 0
]
How can i remove the progress bar when the view goes fullscreen.
Google provides a list of parameters including autohide. While it has been deprecated for HTML 5 players, it may help you with your problem.
Here is a link to the documentation.
If you set the parameter to 2, the controls will hide automatically.
the problem is when the user switch to fullscreen video and then coming back the NavBar of the NavigationWindow is pushed upwards to the size of the status bar and remains there.
The only solution for me that worked is to close and reopen the MainNavigationWindow. and this couldn't be the final solution.
more hint's from me:
z-index of the Video View is higher than the others.
fullscreen vor the app and hiding the NavBar and StatusBar is disabled in the tiapp.xml.
fullscreen for the MainNavigationWindow and it's Main Window is disabled in the
.tss Files.
It looks like this will be all ignored.
The Fullscreen Signal from the VideoPlayer is fired and pushes the navbar to the size of the status bar upward.
After the fullscreen exit remains the navbar at the position.
And under the navbar remains a black gap in the size of the StatusBar.
Screenshots >> here <<
Same Problem >> here << on the Appcelerator Website asked 5 months ago. (with no solution)
MainWindow
<Alloy>
<NavigationWindow id="mainNavigationWindow" platform="ios">
<Window id="mainWindow" class="container">
<Require src="webview" id="startWindowWebViewView"/>
<Require src="videoPlayer" id="startWindowVideoPlayerView"/>
<Require src="menu" id="startWindowMenuView"/>
</Window>
</NavigationWindow>
</Alloy>
View
<Alloy>
<View id="videoPlayerContainer" class="container">
<VideoPlayer id="videoPlayerContainerVideoPlayer" />
</View>
</Alloy>
TSS
"#videoPlayerContainerVideoPlayer":{
height:Titanium.UI.FILL,
width:Titanium.UI.FILL,
borderWidth: 1,
zIndex: 1,
visible: false,
mediaControlStyle: Titanium.Media.VIDEO_CONTROL_EMBEDDED,
scalingMode: Titanium.Media.VIDEO_SCALING_ASPECT_FIT,
autoplay: false
}
Controller
function hideVideoPlayer() {
$.videoPlayerContainer.setVisible(false);
$.videoPlayerContainerVideoPlayer.setSourceType(Titanium.Media.VIDEO_SOURCE_TYPE_UNKNOWN);
}
function setVideoPlayerMedia(media) {
$.videoPlayerContainerVideoPlayer.setSourceType(Titanium.Media.VIDEO_SOURCE_TYPE_UNKNOWN);
$.videoPlayerContainerVideoPlayer.setSourceType(Titanium.Media.VIDEO_SOURCE_TYPE_FILE);
$.videoPlayerContainer.setVisible(true);
$.videoPlayerContainerVideoPlayer.setMedia(media);
}
Meanwhile, I've developed two workarounds resolve or bypass this error.
First one (Hide the status bar permanently in the app.)
tiapp.xml (add key: UIStatusBarHidden value: true)
<?xml version="1.0" encoding="UTF-8"?>
<ti:app xmlns:ti="http://ti.appcelerator.org">
<ios>
<plist>
<dict>
<key>UIStatusBarHidden</key>
<true/>
</dict>
</plist>
</ios>
</ti:app>
The Second one (Reload the NavigationWindow on leaving the Fullscreen)
Quick example:
videoPlayer.addEventListener('fullscreen', function(e) {
if (e.entering == 0) {
Ti.API.info("Get out of fullscreen");
playbackTime = videoPlayer.getCurrentPlaybackTime();
playing = videoPlayer.getPlaying();
// Fixes The MenuBar Gap
Alloy.Globals.mainNavigationWindow.close();
Alloy.Globals.mainNavigationWindow.open();
// Wait until Video is ready
while (videoPlayer.getLoadState() != 3) {}
// set initial Start time to last play time
videoPlayer.setCurrentPlaybackTime(playbackTime);
// checks if the Video was playing
if (playing) {
Ti.API.info("start playing again");
videoPlayer.play();
}
} else {
Ti.API.info("Get in fullscreen");
}
});
That looks like a valid bug. Please check if it is a known issue you can watch or else create a ticket with reproducible steps/environment/code so we can reproduce and fix it.
For those who still look for a solution like me, an alternative solution is to stream your video through a local HTML5 player and open it with a web view, that's the best solution i've found for this problem until it's fixed.
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.