Do not run autoplay video as bg on mobile

Asked

Viewed 239 times

0

My website has as bg a video that is on autoplay.

However, when you’re on mobile, I want this video to not run, leaving only on pause to display a background image.

If I put display:none in CSS it gets a bg black.

<video nocontrols muted autoplay loop>
    <source src="video1.mp4" type="video/ogg">
    <source src="video1.mp4" type="video/mp4">
    <object data="video1.mp4"></object>
</video>

and in mobile CSS:

video{ display:none }

Any suggestions?

javascript jquery css background video

  • <video nocontrols muted autoplay loop> <source src="video1.mp4" type="video/ogg"> <source src="video1.mp4" type="video/mp4"> <Object data="video1.mp4"></Object> </video> , and in mobile CSS: video{ display:None } .

  • 2

    You can take the fixed autoplay from the tag. And when starting the screen, by javascript control whether or not to give autoplay in the video.

1 answer

1

Use CSS Media types to make a difference between mobile and desktop. remove the loop directive from the tag and use Javascript (jQuery for ease) to place the attribute when needed.

Examples:

Html5 video loop and Jquery

Browser other questions tagged javascript jquery css background video

You are not signed in. Login or sign up in order to post.