CODEWITHSUNDEEP
htmlcssvideo
al404IT
al404IT

Reputation: 1418

How can I hide background video on mobile and display an image?

On my page I have a background video 

<video poster="video/p01-v01.jpg" autoplay="autoplay" loop="loop" muted="muted">
    <source src="video/p01-v01.mp4" type="video/mp4">
    <source src="video/p01-v01.webm" type="video/webm">
    <img src="video/p01-v01.jpg">
</video>

I would like to hide them since on some iOs device is displayed video first frame with play button

I would like to display the image placeholder

I would prefer to do it via CSS and media query if is possible I did try this way but it doesn't seem to work?

video > source {
    display: none;
}

Is the the only way to do it hide an image behind and show it on small screens?

Upvotes: 2

Views: 1329

Answers (1)

Kaddath
Kaddath

Reputation: 6151

The visibility of the <source> tag has no impact on the visibility of the video itself. It is a just a tag to declare the possible sources of the <video> tag.

My best advice is to use a wrapper if you want to stick to CSS, or else other solutions could be done using javascript.

NOTE: you will have to set default display for the image to none outside of your media query / in tag style or it will show in addition to the video!

.videoWrapper > video {
    display: none;
}
.videoWrapper > img {
    display: block !important;
}
<div class="videoWrapper">
    <video poster="https://placeimg.com/640/480/any">
        <source src="video/p01-v01.mp4" type="video/mp4">
        <source src="video/p01-v01.webm" type="video/webm">
    </video>
    <img src="https://placeimg.com/640/480/any" style="display: none;">
</div>

Upvotes: 4

Related Questions