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.
Related
I am experiencing an issue in chrome. I am using a wordpress plugin to popup a vimeo embed. Everything looks perfect, except for when you click the full screen icon in the vimeo controls.
The page jumps to full screen but you can only see about a quarter of the video in the top left corner of the browser, on top of the page content that should be hidden by the full screen video.
Please advise!
Resolved. There was an unsupported issue with the plugin I was using. #wpproblems
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...
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.
I developed a website which displays full webpages within a lightbox when certain images are clicked - the pages relate to the images. The pages are inside an IFRAME which is inside the lightbox's content div.
The problem is this: when the page inside the lightbox is longer than the height of the lightbox and the site is being viewed on iPhone/iPad, there appears to be no way to scroll the interior page - scrolling gestures scroll the outermost page (the one that the lightbox is overlaying). Mobile Safari has no scrollbars, depending entirely on gestures for scrolling, so the interior/overlayed lightbox IFRAME seems to be unscrollable.
Are there any solutions to this? Do I need to special-case mobile browsers and open a new browser window or navigate entirely to the IFRAME'd page instead of using the lightbox?
This seems to be a real shortcoming of mobile Safari!
(Not really relevant but perhaps useful info - the site is Drupal-based; the lightbox is the Lighbox2 module.)
While not addressing the pretty serious problem of unnoticeable content on mobile safari, I would like to mention you can usually scroll this kind of content with a two-fingered scroll/swipe.
As for your case, I would do a mobile browser detect and present the user with a new browser window.
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.