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.
Related
I've been working on this page for a client:
http://welcome.babbel.com/en/learn_spanish/
They want the very trendy look of a video + opaque div overlay, and I'm having some trouble getting it to work out on Safari. It seems the video refuses to respond to z-index, and the layering doesn't work. (on mobile, too). Oddly my research doesn't seem to be helping either.
Any ideas?
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've seen this question before, but the answer is evading me. There are four images on the front-page of the site http://miraishii.com. The top image, in the section displays fine, but the three within the second section don't. They are assigned images with id's gal-1, gal-2, gal-3.
The images display fine in desktop browsers, but neither iOS Safari nor iOS chrome will display the background-images. I'm using the Safari inspector to view the site, the images seem to be loading, but not displaying.
It is probably because fixed background images do not yet work in iOS yet. See How to replicate background-attachment fixed on iOS and see does a background-attachment of fixed work in iOS5?
My suggestion would be to use a media query to target mobile and do the background image in the boring way (just for smaller screens). My understanding is if you want fixed background position on mobile right now, you're going to be doing some hairy polyfills. I am sure the situation will improve over time.
The problem:
When I embed a Youtube video in my page Chrome displays a vertical 1px white space on the left side of my page.
The problem is limited to Chrome and pages with YouTube embeds.
Live example:
A page with the problem (YouTube embed): http://tinyurl.com/978349d
A page without the problem (No YouTube embed):
http://tinyurl.com/95qq379
What I've tried:
I've tried resizing the video embed to a smaller width but to no
avail.
I've tried dissecting the CSS via Chrome's element inspector but to
no avail.
My question:
Can anyone suggest why Chrome is adding this unwanted space whenever a page contains a YouTube embed?
The only fix I could find is to set the #main container to width 959px instead of 960px. May not be the right solution but it works
I'm banging my head against a wall with a coding problem. I've developed a website with a large background image to allow scrollable content.
The page appears fine on most browsers, but on the ipad/safari, this browser presents the full background image in the viewable area, not just the native resoltion of the background image as per the ther main borwsers.
It's important I keep the image background and allow it to scroll down as some pages on this site will be lengthy. Any ideas would be much apporeicated!
Thanks in advance!
Preview of layout page: http://websiteworkpreview.com/test/index_test.html
The homepage is index.html (for reference) - Homepage uses different bg image. No problems there...!
Error screnshot of background in Safari on iPad: http://websiteworkpreview.com/test/2.JPG
Mobile Safari has had some issues with image filesize, and some known limitations. Take a look at the discussion in the link below. It shows an example that looks very similar to yours, where the image is being cropped vertically, and some specs as to the limitations. Even though it is referencing using an iPhone, it would, of course, affect an iPad as well, as both use Mobile Safari.
http://www.defusion.org.uk/archives/2010/02/19/shrinking-large-background-image-bug-in-iphone-safari/