I am trying to add custom controls to an embeded YouTube player. I am overlaying a html menu. However, when a user clicks on the full screen button within YouTube my html menu will no longer be available on the larger player.
There are two possible solutions I foresee.
First, if I could figure out the element that is generated for the fullscreen player then I could overlay controls on this.
Second, if I could grab the fullscreen click event I could use javascript to get the current available window demenisions an scale the video to the available realestate.
I found this: https://developer.mozilla.org/en-US/docs/DOM/Using_fullscreen_mode?redirectlocale=en-US&redirectslug=DOM%2FUsing_full-screen_mode
However, I am not sure if it would work in most browsers and second it looks like it is in the test phase.
The answers I am looking for are:
What is the element or how can I find the element that is generated for the fullscreen player?
Or
How can I capture the click event for fullscreen?
Do you want to capture the click anywhere on the screen or on a link in a menu?
If you want to capture the click on a link on a menu I think this plugin can be useful as an example:
http://www.seanmccambridge.com/tubular/
https://code.google.com/p/jquery-tubular/source/browse/trunk/js/jquery.tubular.1.0.js
Related
I'm using video html tag in VueJS, I set the controls attributes to false.
Problem:
It works in Android system, but not on iOS. When I make the video to full screen, the progress bar shows again, and it can be dragged.
I want to know if there is a way to hide the progress bar when the video in a full screen ? Or is there any way to forbid user to drag the progress bar?
I'm developping a web page using YouTube iframe API. I want the full screeen control displayed on the screen while I do not want the volume control on the screen. Is my requirement possible to achieve?
The current code does not work.
playerVars:
{
'fs':1,
'controls':0
},
You are correct by setting the fs to 1 to view the fullscreen control. However, if you set the controls to 0, it will also affect the fullscreen control. Because the player will load immediately and the controls will gone. You can try the different player parameters here in this YouTube Player Demo. Just click the show player parameter to view the different options.
I want to create a header image / banner that, when a play image is clicked, expands vertically to play a video hosted on YouTube.
This page shows exactly what I'm trying to do:
blendedlearningnow.com/about.
I'm not sure if this is a function available through the JWPlayer or some other code.
It does not appear that this is functionality inside JWPlayer. You could do it with jquery and .slideDown() http://api.jquery.com/slideDown/
Load this page on an iPhone, you will see a video player with a cog icon on the control bar. Directly touching this button will not register anything, but if you touch a bit outside to the right, it will fire a hover event. The popup radio list is not selectable either.
All of these work on an iPad. Any idea why?
Well I found out that the <video> element on iPhone Safari will block all touch events. The workaround I use is to reduce its dimension to 1px*1px and always show the poster image, giving the illusion of an actual video. Youtube employs the same workaround.
P/S: the link above may change over time.
I am making an interactive video series in which the viewer can click the annotations to view another video of mine. I have the embedded player on my website, but when I click the annotation linking to another video, it opens a new tab where the video will play on YouTube. How can I make it so that the viewer watches the new video in the same embedded player, without leaving the site?
This is off the top of my head, so not 100% sure, but wourth a try.
First off, you wil need to use the api embedded player. Then you can target it.
You will then need to script the links to target it. Thinking about it, it might not work as the player is "hosted" off your page.
A different way that might be better and should work, is to do a "GET" request on your page and reload your page using the ID to load the required video.
EG.. http: //www.yoursite.com/player.php?videoID=VideoID as link.
I use this in my site for some things, but never tried it with annotations, but should work.