I am creating a print-css file for HTML5 documents containing video files. The video tags inside of a table look like this:
<td class="dataKeyframe">
<video width="180" height="135" controls="controls" preload="none"
poster="../images/sequenzbild001.jpg">
<source type="video/mp4" src="../videos/mp4/E1.mp4"></source>
</video>
</td>
Printing with Chrome results in printing the controls-overlay on top of the video poster.
The question:
Is it possible to set the controls to kind of display:none; --OR-- replace the video with the jpeg defined in the poster attribute? Using CSS only and not touching the html document.
What you want to alter is the Shadow DOM of the element. There are some browser generated subtree elements to display all those controls, panels and buttons browser dependently. Those are not displayed (at least not in chrome) in the source code but you can still play with them.
#media print {
video::-webkit-media-controls {
display: none;
}
}
//css
#media print {
video{
display:none;
}
}
the above code will hide the video in print page.
Related
I have a problem with setting right width and height for the main img src inside block.
<picture style="text-align: center; display: block;">
<source srcset="https://www.ceramic-glazes.com/image/catalog/banners/ceramic-pigments.jpg" media="(min-width: 1200px)" width="1140" height="380">
<source srcset="https://www.ceramic-glazes.com/image/catalog/banners/ceramic-pigments-600w.jpg" media="(min-width: 625px)" width="600" height="380">
<source srcset="https://www.ceramic-glazes.com/image/catalog/banners/ceramic-pigments-320w.jpg" media="(max-width: 625px)" width="320" height="320">
<img src="https://www.ceramic-glazes.com/image/catalog/banners/ceramic-pigments.jpg" alt="Ceramic pigments for Pottery for Ceramics Heraeus" width="100%" height="100%">
</picture>
If I leave it with width="100%" height="100%" visually is OK but Google search PageSpeed Insights reports bad CLS.
If I set the original size width="1140" height="380" all browsers but Chrome set these sizes on the image and visual is bad but CLS is OK!.
If I leave img src without width and height PageSpeed Insights returns Image elements do not have explicit width and height and bad CLS.
So any glue how to fix this issue?
Basically I want to show a different images for different screen sizes, so is there another way than to do it?
You can check how it looks on our site here -> ceramic glazes
At Any product like gold glaze for ceramics
Very easy, simply double state your property rules for your dimensions, with the final rule being what you really want.
So, something like this
.image {
width: 100px; //gives good CLS/Lighthouse (initial)
width: 100%; //gives the desired display result (final)
}
This is also a form of redundancy for supporting old browsers, where you load the old and more common rules first, with the bleeding-edge stuff last.
If the browser does not understand the rules, it discards them.
HTH.
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
I've got a thing like this:
<picture>
<source media="(min-width:1200)" srcset="big.jpg">
<source media="(min-width:840)" srcset="small.jpg">
<img srcset="big.jpg" alt="Test" />
</picture>
I'm also using picturefill.
My issue is that both firefox and chrome (the 2 I'm currently testing on), will load only big.jpg, even in small screens. Checked also on console's network trace.
My css sets img as basic fluid:
img{
display: block;
max-width: 100%;
height:auto;
}
So what's wrong in my code?
As for I haz kode's comment, the answer is: my code lacked unit declaration in media queries.
As for completeness, I also write here a better code for my use case: having a default image for small screens and different one from 840px up.
<picture>
<source media="(min-width:840px)" srcset="big.jpg">
<img srcset="small.jpg" alt="Foradori">
</picture>
This will work correctly and download only the right image for the current breakpoint.
Also remember we need picturefill to ensure crossbrowser support.
Can I remove the default share/download button that comes in default controls on hover of html5 tag , esp in mobile?
my code is like:
<video id="#video1" controls autoplay src="playback.mp4"></video>
I also did in css something like video::-webkit-media-controls-panel{background: white; opacity: 1}, but i could not go inside this, i mean doing
video::-webkit-media-controls-panel *:nth-last-of-type(2){background: red !important}
didnot work because there is nothing 'inside' the media-controls-panel in html.
Pls suggest solution. Thanks for any help.
try with this remove control from video tag
<video id="#video1" autoplay src="playback.mp4"></video>
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
=-)