I have an embedded youtube video in a page. I also have a menu (when opened) is on top of that video.
I have set the z-index value of the menu to higher than that of the video.
I have also set the wmode of the video to transparent to allow for content on top of it.
I am experiencing no issues at all in safari, ie, chrome, or firefox on my computer (the menu is on top of the video, as it should be), but on the iPhone and iPad - the flash content gets replaced with a big clickable youtube button that opens the youtube embed inside the youtube app, and that big button is above the menu. Does anybody know how to solve that issue?
Thank you!
I am not sure if this is what you need. A live example on jsbin.com would help. Anyway I hope the following be useful.
You can use the iframe method that youtube provides to play its videos. If the browser supports html5 will show the video with it, otherwise with flash. Also it plays perfect with iphone/ipad without open the app of iphone/ipad.
You can use the following code as an example <iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/bIPcobKMB94" frameborder="0">
in the above example the video id is bIPcobKMB94. You can change this id and show your video.
You can access with your iphone a live example of it here
More infromation for youtube iframe
YouTube HTML5 Video Player
The ipad and Iphone unfortunatly don't display flash content. It uses the h.264 version of the videos.
Therefore its an entirely different plugin that actually plays the content and setting the Wmode of the flash file won't make any difference.
EDIT
I've looked and I've no solution for the ipad/sefari/iphone problem.
I encountered this problem as well. After adding parameter "wmode=transparent" for the code
<iframe width="480" height="360" src="http://www.youtube.com/embed/111111?wmode=transparent" frameborder="0" allowfullscreen></iframe>,
the problem is fixed.
I suspect that the application used to switch out the content is setting a z-index level inline. I would find the id of that element (the button or it's container) and set the z-index to lower than you menu z-index. Be sure to include '!important' after the value to ensure it overwrites the inline style.
Related
We have a problem with our WordPress. We are using mediaelement.js .
So there is a problem with the <video>-tag and Firefox. If i reduce the window size the video is not getting smaller. In Google Chrome and IE it's no problem if I reduce it there the window the video is getting smaller.
I have no idea what I can do. I tried so many things but nothing happend :-(.
So we are using the [video .... ] tag in a textblock in WordPress.
I tried for example "style: width:100%; height:100%;" but nothing happens in Firefox.
How can I ensure the video resizes correctly in Firefox?
looking at the Browser and Device support chart on the website of mediaelement.js it might be that the video you are using has a format that can play via html5 video in IE and Chrome but not Firefox, so Firefox has to use Flash which in turn won't resize.
could you help me with the following case:
I have a youtube video on my website.
<iframe width="400" height="225" src=http://www.youtube.com/embed/jKIfjiIjd?
rel=0& color=white&iv_load_policy=3&theme=light" frameborder="0" allowfullscreen></iframe>
Beneath and above this video I have some form elements like
<button class = "button" id = "video" type = "submit" onClick = "javascript: somefunction();" >some value</button>
The video is in its own div, the buttons and form elements are in their own divs.
The buttons work perfectly on the desktop browsers, however on the mobile browsers those buttons, that are beneath the video are impossible to click (top buttons are working fine) I figured out that if I remove the video from the page, all the buttons start working. The buttons also work for the first few seconds before the video is fully loaded. So, it looks, like the video is invisibly overlapping the area 100-150px beneath it and makes impossible for mobile browser users to click on any element. (ps Ive tried to use z-index of 1000 - no effect)
Please, help.
Thank you for your time.
I'm having the exact same issue with the YouTube iFrame. I've been testing all day. Here is where I'm at:
The problem is the element that is inside the YouTube iFrame.
<video class="video-stream html5-main-video" controls="true"
x-webkit-airplay="allow" data-youtube-id="..............."></video>
If you 'display:none' that, or change it to 'top:0'. It fixes the problem.
However, since it's inside the iFrame, I dont know how to change it.
To add to this discussion attached is a link to a fiddle of the issue here:
http://jsfiddle.net/krismeister/KynXG/5/
//<script src="http://www.youtube.com/player_api"></script>
<h1>The youtube iframe has a video tag which on iPad blocks touches on elements beneath the iframe.<br><em>tap below the video and you will see no color change.</em></h1>
<div id="vid-placeholder"></div>
<div id="bg"></div>
I am trying to embed a video in my aspx page. Everything works fine. The video is not started immediately by setting autostart=false.
Now I want to show a fixed initial image in place of black screen. In IE I did it by setting transparentAtStart=true and some JavaScript code. I was hoping to do the same in Firefox and Chrome, but both don't seem to understand transparentAtStart tag.
I am playing a .wmv file using a .mwv plugin. Is there any other way to show fixed initial image before the user clicks play?
You can use the HTML 5 video poster attribute for your image.
<video poster="/images/poster.jpg" autostart="false">
<!-- sources -->
</video>
I'm using youtube iframe to embed videos on a site of mine. I'm using the iframe so that visitors to the site that don't have flash installed will see a html5 capable player.
Everything plays and runs as expected until you right click on the video and select and option like "copy embed HTML" and the video jumps off to the left of the iframe.
Upon inspecting the source, it seems like there is a div with class .player-actions-container that has a css rule of left: 101% if i remove this rule the player jumps back to its starting position.
demo
http://www.neilcremins.com/yt_test/
unclicked image
http://www.neilcremins.com/yt_test/unclicked.png
clicked image
http://www.neilcremins.com/yt_test/clicked.png
Your concern over lack of Flash presence is at this time unwarranted.
Maybe someone is familiar with this problem?
on the website http://www.folkshegeskoalle.nl/ i have added the like and send button.
but, the youtube video under these buttons stays all the time on top (only not in firefox. here the flyout of the buttons go over the video, as desired). is there any solution to this?
the video is embedded through iframe, the buttons through the javascript sdk and special html code.
thanks for any suggestions..
Flash can be tricky to deal with when it comes to z-index issues. By default, a swf will appear on top of any other content that occupies the same space. One way you can fix this is by adjusting the wmode of your flash video. Try adding ?wmode=opaque to the YouTube video's URL and it should play better with z-index.