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.
Related
I've tried various things to make it work, such as playsinline, various different implementations. The video I've tried in MP4 and HTML5, it's muted and plays as background video. It works fine everywhere but it doesnt work on the iphone, upon further investigation I tried it on safari on macbook and it doesn't play there either - thus making it a safari browser issue. I know for a fact that there is either a fix for this, just figured I'd ask here instead of guess and checking.
I tried to make a background video work on safari mobile & desktop browser.
I am encountering a weird issue once again, and it again happens to be in Safari on iPhone. Safari on macOS works fine, and so do all other major browsers.
Here's the issue: Embedding a YouTube video in an iframe transforms the iframe to the left, out of the viewport. There is no transform applied to the iframe, or any parent elements. I double checked, but I am out of luck. Funnily enough, there's two quirks:
The clickable area stays non-transformed. I can interact with the content as if it was in its correct position.
Switching to the tab overview renders the video correctly.
Here's a few screenshots to demonstrate the issue:
I have also created a JSFiddle that reproduces the issue, with markup directly out of the project. Visit it on mobile Safari on iPhone or with a simulator on macOS to see the problem in action. (Use this link for fullscreen access)
Any help would be greatly appreciated.
The pic (thumbnail) inside the iframe for the youtube video used to go to the edges of the iframe. Now, without changing any code that would've affected that, the thumbnail stays in the center, miniaturized, and there is black space around it on all sides. This happens regardless of the iframe aspect ratio. The issue is happening in Chrome only and it looks fine in FF.
*Edit - this is happening everywhere, not just my site. It's a Youtube issue.
Something just happened with this tonight with the Youtube thumbnails not being expanded to 100% of the video size. I noticed with my embedded videos on Chrome, but you can see it with almost all embedded videos on Chrome or Chrome Canary. The thumbnails are at 100% in Firefox or IE 11. Must be a YouTube issue.
I have a wordpress ng gallery template: http://bit.ly/LTJ9ee, the lightbox of which behaves oddly in chrome when a video is embedded on the same page. The problems only occur when:
Using chrome (v23). Tested on all other major browsers (windows 7) with no problems.
If the page is too big for the viewport (has scrollbars)
There is an embedded video in the page, and the video has already been started (same problems occur whether html5 or flash)
If you look at the page here: http://bit.ly/123NW1C, what seems to be happening is that under the above conditions only, the lightbox is not moving to fit the viewport as it should. This makes parts of it display twice and parts of it not display at all. Web inspector says the divs are positioned correctly, but 'as seen' they are not.
I'm currently stumped on this. The wmode fix didn't help, nor did anything else I found online. Any ideas on what this is likely to be? A bug in chrome? Or something about the way this lightbox interacts with an embedded video.
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.