So one page of my website is quite video heavy. It has a big one as the background and like ~4 small ones in boxes. In Chrome this works wonderful and without any problems. But in Firefox its laggy and makes the entire interface frustrating to work with.
Now, I suspect this might be due to the fact that Firefox doesn't use the GPU, but im of course not sure, it could also be the code.
Im using mp4 videos. This is the code:
.video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
opacity:0.2;
transform: translateX(-50%) translateY(-50%);
}
<video loop muted autoplay poser="bootstrap/img/lp_header.png" class="video">
<source src="bootstrap/video/game_hub_bg2.webm" type="video/webm">
</video>
There is not a code-able solution to this, however there are some alternatives.
Decrease your file size, using Javascript you can call a lower quality video on firefox (not going to provide an example since that's not what the question has asked).
Restrict your website for chrome use, this is a code-able solution.
Get a better computer.
Enable Firefox to use the GPU by hovering Options > Advanced > General > Browsing > Enable Tick. (#Marcos Perez Gude in the comments provided this alternative, shoutout to you).
Related
We are positioning some text over a HTML5 <video> which acts as a looping video background. However, the absolutely positioned elements are not visible on iOS' Safari, if the battery saver mode is active, regardless of any z-index settings. Example:
<div class="example">
<video playsinline muted loop autoplay>
<source type="…" src="…" title="…">
</video>
<div class="text">
Lorem ipsum dolor
</div>
</div>
.example {
position: relative;
}
video {
width: 100%;
height: auto;
}
.text {
position: absolute;
left: 2em;
top: 2em;
right: 2em;
}
This HTML and CSS code works fine, the text is overlayed over the video playing in the background. However, once the battery saver mode on an iOS device is activated, the text is not visible anymore - and cannot be made visible via a z-index either.
Is this somehow by design, so that the iOS user always has the opportunity to actually play the video (i.e. nothing obstructs it), since it will not automatically play in battery saver mode? Is there any way to prevent this behaviour? The video not playing automatically is fine (since that's what is supposed to happen in battery saver mode) - however we would want the text to be displayed.
I think the behaviour you are seeing is intended to allow the user the ability to play the video if they want in low power mode, as you suggest. It is possibly a use case that was not considered - i.e. to allow for something that is intended to be visible over the video so you could raise a bug request to check this.
In the meantime, as a workaround you can check if your video has been suspended and then make whatever changes you want yourself. See example listener below:
yourVideo = document.getElementById('your_video_id');
yourVideo.addEventListener('suspend', () => {
// Add code here as required
// e.g. hide the video and display
// an image and your text instead.
});
Suspend event info is here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/suspend_event
Any image of sufficient size that is displayed in any app I've worked on becomes pixelated when resized. The screenshot above shows a high resolution photo that - when outputted - becomes heavily pixelated.
I've tried the good old (little-known) property specific to IE -ms-interpolation-mode: bicubic; but it makes no difference.
I've seen this problem in Microsoft's News App on multiple machines so I don't think it's a problem limited to my machine or the way I'm displaying the image.
I've tried this in Windows 8/8.1 and 10 with the same results.
Trying the same code in Edge and IE11 works fine, the image is beautifully sharp without pixelation. Here is the exact CSS and image that make up the app example screenshot.
.exampleImage {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
-ms-interpolation-mode: bicubic;
}
<img src="http://blog-admin.cddev.org/wp-content/uploads/2014/12/Aston-Martin-DB10-Front-Three-Quarter-e1417707100993.jpg" class="exampleImage" />
Does anyone know how to stop the pixelation?
I'm thinking it is a lack of subpixel antialiasing, which doesn't seem to be supported in IE and Modern UI apps.
There is actually a feature request for it here, with 5699 votes on User Voice, titled 'Return subpixel antialiasing to IE and ModernUI apps'
That request is relevant to fonts, but under the hood it is the same thing.
I've been searching for a while now about how to layer html element over SWF object and at last what i came up to is (according to Abode):-
Internet Explorer : Doesn't support layering at all.
Firefox : Doesn't support layering (But it worked but without transparency).
Chrome : Adobe claims that it is not supported but amazingly it worked fine and with transparency.
Safari(Windows) : Doesn't support layering at all.
safari(Mac OS) : supported.
I know that i can easily set wmode="transparent" or wmode="opaque" an layering will work just fine. but i found out that with SWF object which contains 3D content its wmode must be set to "direct" or "gpu".
if anyone knows any solution to this problem, i would appreciated cause i'm developing a game on flash i want to overlay it with html elements and i didn't found any firm answer whether its possible or not
Thanks in advance
After a few tries I got a solution working on Firefox & IE.
It's kind of dirty but works in some cases.
An iFrame is shown on top of the swf, so you can add your layered html in the iframe.
You can go further and set the iframe into the background, it's just needed to keep the spot clear for the upcoming html.
HTML:
<div class="box">
<iframe src="emptyframe.html" frameborder="0" class="emptyiframe"></iframe>
<div class="content">
Shown on top
</div>
</div>
CSS:
.box { position: absolute; z-index: 100; background: #fff;}
.emptyiframe { position: absolute; width: 100%; height: 100%; border: none; z-index: -1; }
With this solution it's possible to add elements over the flash even with wmode="direct". But you need to keep in mind that the iframe is in the background of the html on top of the flash, so you can not make any transparence.
There are many questions on here regarding how to do background HTML5 video, but I have no issue with that, it works fine (except for a small issue where it will only play audio and not video until I select something on the page or resize it, see here for that issue: Chrome Only Plays Audio Until Resize
What I want to do is make the video fit the background so that it never has any letterboxing (the lines above/below or on the sides when the aspect ration doesn't match). That means fit width when the height is less than the ratio, and fit height when the width is less than the ratio.
This will cut off some of the video, but that's fine, I just want to get rid of the letterboxing. Is there any way to do this with just CSS, and if not what javascript/jQuery/whatever do I need to use?
My code so far:
#mashvid {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: auto;
min-width: 100%;
z-index: -5;
}
<video preload id="mashvid" poster="images/mashvid_poster.png">
<source src="http://www.mashwork.com/testsite/video/mashwork1080.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="http://www.mashwork.com/testsite/video/mashwork1080.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="http://www.mashwork.com/testsite/video/mashwork1080.webm" type='video/webm; codecs="vp8, vorbis"'>
Your browser does not support the video tag.
</video>
I solved it like this, although I'm not sure how solid it is
function dimensionFunction() {
if ($('video').height() <= $(window).height()) {
$('video').height($(window).height());
$('video').width('auto');
} else {
$('video').width($(window).width());
$('video').height('auto');
}
if ($('video').width() <= $(window).width()) {
$('video').width($(window).width());
$('video').height('auto');
} else {
$('video').height($(window).height());
$('video').width('auto');
}
}
I have tried two (2) different jQuery plugins that do a fairly good job with this issue.
http://github.com/georgepaterson/jquery-videobackground
a nice plugin, with callbacks and nav/control functionas and styles, does not work on mobile "so-far-ee" but very nice on windows and osx lion.
and
http://syddev.com/jquery.videoBG/
a simpler plugin easier to customize, but also less robust, same issues with mobile safari but v ery capable otherwise.
the issue i have found is that scaling bg video or img bg attched to body will behave differently in smae browser on diff OS
bot safari and ie refuse to scale width to my liking on windows platforms but behave as expected on osx, your mileage may vary
=-)
I need image to stretch as background of page. It doesn't matter if page will not scale well, what ever screen resolution may be, whole image has to be visible on screen. I found some solutions on Google, but it either didn't work in Firefox2 or IE6 or both, and I need those two too.
I hate when people don't upgrade their software, but I'm still see these browsers in google analytics data hitting web page, especially IE6.
Is there good cross browser solution for this?
You could use a good old fashioned img tag, without height and width attributes. In your CSS, position it absolutely with a low z-index, set height and width to "100%".
Put everything else on the page in another div with a higher z-index
Like this:
<style type="text/css">
#stretchy {
postion: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 0;
}
#everything_else {
position: relative;
top: 0;
left: 0;
z-index: 10;
}
</style>
...
<img src="/images/myimage.jpg" id="stretchy" />
<div id="everything_else">
...
</div>
See http://axoplasm.com/lost.html for an example.
It's not exactly a "background image" (and probably not W3C standards-compliant CSS) but it works.
I don't want to hijack this question, but if you had this code:
background-image: url('images/background.gif');
background-size: 100%;
This repeats the image in all current browsers (IE, FF, GC, SF, OP) which while unsavory works across all the browsers, unlike the z-index depth method (I have a complex foreground).
However if a browser was to suddenly get bg-size CSS3 support, does the CSS3 spec say what should happen? Should it stretch the image or do what it always did and repeat?
It is not possible in CSS1 or CSS2, however it is possible in CSS3: requiem4adream.wordpress.com/2006/09/29/css-stretch-background-image/
However this is not available to IE6.
An alternative would be using background-repeat, or this site has something that might work (I havent checked if it works): webdesign.about.com/od/css3/f/blfaqbgsize.htm
I know what you mean about users not upgrading browsers, but at what point do you stop coding for IE5, or even IE4?
Good luck,
Matt
A good alternative would be to use a "static image" that fades out to a pattern or solid color. That way you still get your background image (however big you want it) and scalability.
In CSS3, you can use background-size: 100%;
Firefox 3.5 supports some CSS3 properties, but I don't believe they support EVERYTHING yet... (I think).