I'm using the YouTube API to display a video in the browser that takes up the entire viewable area. In every other browser I've tried it on (Chrome 23, IE 9, Safari 5, Chrome on Android), the close icon overlay is clickable while the video is playing (click link, see top right):
http://jsbin.com/ajivex/2
It doesn't work in Safari on IOS 5.1.1. Is there anything I can do aside from creating a header and forcing the video not to take up the full height of the viewable area?
Related
I can't click on any building pictures links (at the very bottom of the homepage) when going on mobile a this project whatever safari, chrome or firefox (while it's working well on desktop) :
here is the concerned building pictures links
Do you have any ideas of how I can fix that ?
Thanks for your help !
I can click them on an iPhone 8 with Chrome Browser.
But i can only click them outside of the colored border. So the colored border is above the image which contains the link.
Check the z-index property and the media queries. You will see, that the border is above the image on mobile devices and below the image on desktop screens.
I have a div with a background image that is set to be the height of the viewport (height: 100vh), with an SVG image overlayed. Everything works fine on the desktop version of Firefox (resizing windows or using the mobile preview), but it wants to render the full image length on Firefox mobile.
The page is: http://sandy.utah.gov/_Adventureweek/index.html
Everything works fine in Chrome Mobile and Opera Mobile.
Also, peculiarly, if you select text farther down the page, the page suddenly decides to redraw and renders correctly on Firefox Mobile (all on my Samsung Galaxy S6, using current versions of the respective apps).
I've been trying to figure out what's going on, but I'm at my wit's end.
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.
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.
In most mobile sites, scrolling will hide Safari's header and footer chrome.
However, when using Polymer's core-header-panel or core-scroll-header-panel, the chrome is always present.
(EDIT: Related issues on GitHub: https://github.com/Polymer/core-scroll-header-panel/issues/19, https://github.com/Polymer/core-header-panel/issues/15)
Here's a Facebook screenshot, and notice how the chrome goes away as I scroll down:
Here's a screenshot of my Polymer app, and notice how the chrome remains: