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.
Related
I have a problem with my website, for example: https://filmowo.co/odcinki/marvel-cloak-i-dagger-1x1/ when you open the player in fullscreen mode there are site elements under the video. Beware of ads. Here is a screen also:
screen
I was only able to fix the header which has fixed position but with the content section its not working. Can you please take a look? I think its pretty easy but Im not css specialist :)
update:
this is the element that need to be modified, any ideas? https://i.snag.gy/YHy4Ns.jpg
Okay, there was an issue with animate.css plugin which I used to animate a player while loading.
So I have a website with a menu-bar at the top with a sub menu that appears when you hover.
Under the menu, I have a large video playing embedded with the HTML5 <video> tag. However, on safari on ipad, i can not click the links that are hovering above the video, despite me having given them an appropriate z-index.
Can anyone help me out here? :(
edit: here's a jsfiddle: http://jsfiddle.net/7t6c00vn/
The issue seems only to happen on ipad.
The video takes precedence over any other material. Check Putting Video on Canvas on developer.apple.com.
So far as I can see the only solution seems to be to hide the video. Check
A Solution for Overlaid Elements on Video
I would also love to know if there is any other / better solution to this because I'm also in the process of building something using HTML5 and video that needs interaction.
It turns out that it's a sort-of-bug that was fixed with an update for the system. I don't think this problem has a definite answer yet, but I will choose FrankHe's answer as it actually provides some real suggestions and material for the problem.
But yea, things seem to work after the iOS update, so to any end users experiencing overlay problems with Video elements, update your systems! :)
Unfortunately, this also means I no longer have an un-updated device to test on.
my website is a single page site, divided into two seperate pages (www.JazzAndRain.com). I'm trying a HTML5 video fill up the 1st half of the site, but somehow when it's loaded in Chrome and Safari, the video appears half way in the page. When you inspect element, the video will be pushed up. Does anyone know a solution to make the video load correctly?
Margins are being added inline - by some javascript I assume. Stop whatever is doing that...
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.
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.