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
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.
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 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'm using the Fancybox on this page.
I've set it to show the videos in the top carousel in a Fancybox only
if the browser is Safari/iPad. If you click one of the videos in the
top content carousel, you'll see some extra lines outside of the
Fancybox. Plus, you'll see that the title item (set to titlePosition:
"outside") has some funky corners -- they're off by a pixel or two.
On the iPad, if you tap the "Click to See a Gallery of Popular Thank
You Gifts!" toward the middle, bottom of the page, you'll see some
extra lines outside of the Fancybox when it pops up.
This all works fine on Windows Safari 5. Any solutions?
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.