How can I hide Youtube controls but show the Fullscreen button? - html

I am trying to hide the controls, but show the youtube fullscreen button, so that the player looks like the vimeo player.
I have added the following parameters after my embed URL:?&controls=0&showinfo=0&rel=0&fs=1
However, it only hides all of the controls. Is it possible to only show full screen button?
Note: the <iframe allowfullscreen> has this option set.

As of September 2018, this doesn't seem to be possible directly with the YouTube iFrame Player API. You can hide all controls (controls=0), or you can hide the fullscreen button specifically (fs=0), but you cannot exclusively display the fullscreen button by itself (i.e., controls=0&fs=1 won't work.)
However, conceivably you can hide all controls and overlay your own custom fullscreen button, and use the browser Fullscreen API to invoke fullscreen on the iframe.

Jacob
You can use parameter 'fs' to implement what you want.
Reference: https://developers.google.com/youtube/player_parameters
Sample:
<iframe src="https://www.youtube.com/embed/?fs=1" frameborder="0"></iframe>

Related

How to disable youtube link from iframe

I'm embedding a youtube iframe video player in my website made with React. I don't want there any clickable link in that area, more specifically I want to restrict the youtube link to load from inside the iframe elements.
look at the red mark area, if I click there, it opens youtube.com
Is there any way to restrict "youtube.com" from my site that will prevent me to click or something like this?
modestbranding=1
This parameter lets you use a YouTube player that does not show a YouTube logo. Set the parameter value to 1 to prevent the YouTube logo from displaying in the control bar. Note that a small YouTube text label will still display in the upper-right corner of a paused video when the user's mouse pointer hovers over the player.
https://developers.google.com/youtube/player_parameters#modestbranding

Always show controls on YouTube embedded iframe

Is it possible to always show the controls (disable autohide) on an embedded YouTube video?
I've tried adding autohide=0 to the source url but the controls and progress bar still hide after a second or two. I'm confused because the IFrame Player API states...
0 – Regardless of the player's dimensions, the video progress bar and player controls are visible throughout the video.
Is there something I'm missing or has the functionality been removed?
See: https://jsfiddle.net/hmpj3fn6/
After a little more digging...
This parameter has been deprecated for HTML5 players, which display or hide the video progress bar and player controls automatically (autohide=1).
https://developers.google.com/youtube/player_parameters#autohide

HTML5 video - disable fullscreen only

I am using the video tag for my page, and I am trying to exclude the fullscreen from the controls.
I see that the "controls" in general is only a true/false statement, but i am looking for a way to disable the fullscreen option from the video.
I could do controls false and use autoplay the video - Then i have no controls - and the video will just play.. - but i think this is too drastic a "solution".
So what kind of solution can be done to achieve what i am looking for ?
For browsers that incorporate a shadow DOM (e.g. newest version of Chrome), you can still use the default controls, but hide the fullscreen button.
Just be sure to include the following in your CSS:
video::-webkit-media-controls-fullscreen-button
{
display: none !important;
}
As shadow DOM manipulation like this becomes more commonplace, more browsers will hopefully support it. Until then, stick to making custom controls or putting the video within an iframe as long as your src points to an html file with a video tag in it, and you specify allowfullscreen="false"for the iframe.
controls is a binary state, you either have what the browser provides or you have nothing.
If you don't want the browser to provide a full screen control but still want a UI, then you'll need to turn controls off and implement your own UI with JavaScript.

SoundCloud HTML5 widget: share panel covers waveform when audio finished

When the audio completes in the HTML5 version of the SoundCloud widget, the share panel appears and covers the audio waveform. The user can replay the audio; however, the share panel doesn't disappear, nor does there seem to be any way for the user to hide it. Nor is there any way to prevent the panel from appearing in the first place, which is the ideal option.
The "sharing" parameter is set to false in my embed code.
Here is the embed code I'm using:
<iframe width="100%" height="100%" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F87283114&buying=false&sharing=false&liking=false&show_artwork=false&download=false&show_user=false&show_bpm=false&show_playcount=false&show_comments=false&color=568ED4&theme_color=DDD9C3"></iframe>
Replicated in Firefox and Chrome.
Again, this is an HTML5 issue only. The Flash version works properly.
Note that a similar issue also occurred but was fixed in the Flash version:
New SoundCloud HTML5 widget animation on track finish

How can I remove youtube logo from the youtube player for use in other application?

I want to use the Charmless youtube player in my application and I want to remove youtube logo from the Player. How can i achieve this thing? My application is developed using AS3.
Simply add ?modestbranding=1 to the end of your URL.
See more here.
modestbranding (supported players: AS3, HTML5)
This parameter lets you use a YouTube player that does not show a YouTube logo.
Set the parameter value to 1 to prevent the YouTube logo from displaying in the control bar.
Note that a small YouTube text label will still display in the upper-right corner of a paused
video when the user's mouse pointer hovers over the player.
try this API player code.
http://www.youtube.com/apiplayer?version=3&modestbranding=1&showinfo=1
Chromeless player, the modestbranding has no effect unless "showinfo=1" is must for API player.
I tried to remove youtube logo by many ways. But I didn't get success to remove it from the youtube player.
Finally I check the youtube player functionality and behavior. When video is attached to the player then it will be displayed in center. if player container height is bigger then video height so both (top and bottom) side Black strip will be appeared. Just we have to hide the Black Strip from the user display area using masking concept. (In Flash we can apply the mask to container and same thing will be done using the DOM model in Javascript.)
In directly it will be removed as per end user perspective not actually. so Indirect way youtube logo is removed from the player.
you can try GKPlugin this plugin using JWPlayer 5.x at:
https://drive.google.com/folderview?id=0B0OhZLpuvlSRTDZLMXowQWNMZTA#list