When embedding a video with autohide=0 and controls=1 (which is default anyway), one would assume the controls are always visible.
This is however not the case when looking at an embedded video on Android or iOS, where the exact same embed code yields a player without "always-on" controls (e.g. before clicking "play").
I've created a small demo which indeed has YT display the controls when viewed on desktop, but not when viewed on iOS or Android.
My questions:
Is this a bug (and if so; is a solution in the works)?
Is there another way to force the controls to be visible on mobile?
iOS Safari supports HTML5 video (it uses Quicktime to render it). Behind the scenes, the YouTube API is creating an HTML5 video element inside its iframe. There is no HTML5 attribute that specifies whether or not to keep the controls visible, therefore YouTube cannot make the controls stay visible on the iOS.
Unfortunately, at this time, I think the only solution is to build your controls and use the javascript DOM API to control the video.
I dont know how to explain this, but here it goes.
Have you seen a delphi code that uses twebbrowser and displays only the frame(height and width) of the video?
I meant if I browsed in youtube the small window of the twebbrowser will resize itself to the size of the video of youtube video.
Even to the other websites that has a video, the twebbrowser automate to resize itself like the video size of the website.
i hope you've seen a code like that one,
thanks
I've seen something similar. If you use Adobe Flash to play the video, you could use Navigate to a URL directly to the .swf file and this would show the file sized to the size of your TWebBrowser component. If you also add what is needed to suppress the border of the TWebBrowser component, it might result in what you're looking for.
I have a website which contains youtube flash player. Player's code was copied from Youtube and pasted to an HTML of my page.
When I'm opening the page in iPhone or iPad, the player can't be covered by absolute positioned DIV tag. The div tag has z-index 1000 and covers all elements (youtube flash player too) on the page if I use normal PC. But in iPhone or iPad I can't cover youtube player by this div element.
I used many tricks with OBJECT and EMBED tags of flash element (adding style="position:absolute; z-index:0" and etc.) but no results.
Please assist how can I cover Flash element in iPhone or iPad.
please use an iframe. That's the way I've done it.
I found that on the iphone there are certain things that dont work but will work on a pc. I believe however Iframes are quite versatile with stuff.
Try it out. Let me know if it works.
You just had to add ?wmode=transparent at the end of the url of the youtube embed code to fix the problem.
It should work!
I got a video element on a page that's working fine both in safari mobile and desktop.
I have a seme-transparent pull-down menu that's working fine. The problem is, when the menu is over the video element, on the desktop safari i can see the video under the menu (as desired), while on the mobile version the video element stay on the foreground (ugly) no matter what i tell the css. Is there any workaround?
The issue only occurs if the video element was dynamically created. If the element was just in the page as it loaded, z-index works fine.
You can fix z-index on dynamically created videos by giving the video element -webkit-transform-style: preserve-3d.
Yep, it's as bad as haslayout on IE!
Unfortunately not.
Based on my experience and understanding of how iOS currently works, this isn't possible.
Mobile Safari on the iPad cuts a hole for a Quicktime window , which plays back the video using the built in hardware acceleration to improve battery life. (The iPhone and iPod Touch just open it up in a separate window to achieve the same effect.)
This window doesn't play nicely with the other HTML on the page. In fact, I haven't found a way to get mobile Safari to display anything on top of a tag. My guess is that this is because the hardware acceleration only allows for video scaling and positioning, and that it's only able to handle one video at a time.
I'm using flowplayer and a simple CSS dropdown menu and had the same problem.
I have drop down menu that, when tapped, covers part of the video area. The submenu shows up over the video as expected, but no touch events were being sent.
I fixed it by combining a couple of suggestions from others answering this question: I set visibility:hidden when opening the menu and visibility:visible when closing the submenu, AND set the -webkit-transform-style:preserve-3d CSS property on the video.
Here's the pertinent code. I left out the CSS for the menubar, but it does what you might expect - resulting in a menu that covers portions of the video.
menu and video HTML
<div id='nav'>
<ul>
... <!-- bunch of ul/li stuff here for the menu and submenus -->
</ul>
</div>
<div id='videoplayer'><!-- for flowplayer --></div>
CSS
video {
-webkit-transform-style: preserve-3d;
}
Javascript
$(document).ready(function(){
$("#nav li").hover(
function() {
$(this).find('ul:first').css({visibility: "visible",display: "none"}).fadeIn(300);
$("video").css({visibility:"hidden"});
},
function(){
$(this).find('ul:first').css({visibility: "hidden"});
$("video").css({visibility:"visible"});
}
);
);
I have managed to place a menu div over a html5 video tag in mobile-safari on the ipad. To be honest I didn't have any problems and it just worked. It could be though because I was using CSS3 animations and therefore the GPU? You could try using a hack to add an element to the GPU. If you put -webkit-transform: translateZ(0); on the element it should force it to use the GPU...
When you have an element you want to be in front of your <video> in Safari, you need to set into that element the transform: translateZ(1px) or more pixels, as Safari is setting to your <video> element a 0 value for Z axis (transform: translateZ(0)).
This is the only thing it worked to me. No z-index, no transform-style:preserve-3d.
I ran into this also. The only thing that I could get to work for me was to add
display:none
to the video tag when showing a div over it that needed to be clicked on.
-webkit-transform-style:preserve-3d and -webkit-transform:translateZ(0) didn't work for me.
Using Flowplayer with the ipad plugin and the controlbar plugin allowed me to remove the ipad created control bar and replace it with something that can be z-indexed below my modal windows.
You can fix z-index on dynamically created videos by giving the video element -webkit-transform-style: preserve-3d.
This worked for me with a dynamically created video element. I also set the z-index of the over-laying div to z-index: 888; which may also have helped.
I had this problem which was occurring on mobile devices with an off canvas menu. When the menu was over the video you could not tap any of the menu items.
I fixed it my moving the video somewhere else when the menu was on by positioning it absolutely at -100000px when the menu was not displayed it set it back being positioned relatively.
I found using display none did not work as when you set it to block again the video would not work.
I also tried setting the height to 0 - this did not work as the video still seemed to take up the space even though you couldn't see it.
The final method seems a bit extreme but it is not really noticeable when it is being used.
This is the code that will work on both the iPad and iPhone. I tried removing the controls and then add them again, but this worked only on iPad not on iPhone. After remove the opacity and then add it again it worked on iPhone also.
$("#overlay_open").click(function(){
$("video").prop("controls", false);
$("video").css("opacity", 0);
});
$("#overlay_close").click(function(){
$("video").prop("controls", true);
$("video").css("opacity", 1);
});
Just ran into this issue today & had to cobble together a solution from multiple answers since none fully handled the problem ...
I have video elements in a collapsed "table view" style list that were capturing touch events on iPhone when trying to tap on other list items. On iPhone the videos would play when tapping other collapsed elements that happened to be occupying the same spot on screen.
Fixing this required all of the following:
1) Using this:
video{
-webkit-transform-style: preserve-3d;
}
... didn't seem to have any effect, but I left it in anyway. Everything's working now so I don't want to screw with it further :)
2) Toggling visibility: hidden alone didn't work, and display:none didn't work as expected.
3) In addition to "visibility" the HTML5 video tag controls attribute also has to be added/removed dynamically. Either:
$("video").css({visibility:"hidden"}).removeAttr("controls"); or $("video").css({visibility:"visible"}).attr("controls", "controls");
4) Must set visibility/controls on document load based on initial browser/screen size
5) Although the main concern was the screwy iPhone behavior, I also had to account for responsive window size changes above my smallest media query breakpoint of 600px - otherwise the videos would appear/disappear at the wrong screen sizes.
$(window).resize(function(){
if ($(window).width() > 600){
$("video").css({visibility:"visible"}).attr("controls", "controls");
}
});
Quite a pain to work around what's essentially a stupid mobile Safari bug... I sure hope it works on iPad when I test it later...
For anyone running into issues with this still, another fix that ended up working for me was to change the options in the embed code to not allow controls, suggested videos, and video title and player options. I added a simple Modernizr.MQ query to change the src for tablet and mobile, and included the following to the iframe src for mobile:
?rel=0&controls=0&showinfo=0
I never completely tracked down why this works, but my guess is that the controls have some user-agent style that gives them a high z-index and makes the element sit on top of everything.
I'm embedding windows media player in a windows sidebar gadget.
As soon as I start the player (even if i stop it after doing so), hitting WIN+D ("Show Desktop") hides my gadget (all other gadgets stay visible).
What's causing this issue and is there a way to fix this annoying behaviour?
The problem occurs both with a media player embedded in the HTML and with one created with new ActiveXObject(...).
As I was looking for an solution to this question (on StackOverflow). I found that 'styling' media player instance
<object id="mediaPlayer" classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" type="application/x-oleobject"></object>
with this CSS
#mediaPlayer {
position: absolute;
z-index: -1;
}
was all that it took to have it not disappearing.
EDIT:
'Unfortunately' this did fix it, except when you start the player once 'touched' the Gadget would disappear like before.
I did find a way to 'fix' it. It appears not to happen when you use video in the player. It doesn't care if it's viewable. So you could consider finding a video stream for the audio you want to hear. In my case: I wanted to build a Gadget for the dutch radio station 3FM, and include a video stream in the the end.
This was a challenge itself: nothing more annoying than a a-sync video/audio stream. So i had to really 'think outside the box': the flyout consists only of the station's logo. The gadget itself is 'viewable' within the specified range. Except the video stream-container-div is hidden until requested to view and I invoke the gadget's flyout. So in the end: I fixed it, but it's no solution to the original question...
For those interested in the solution: 3FM-2011.gadget download