[Resolved] Video is too big for mobile and tablet

[Gareth]

Hi,

I’ve made an element for the 404 page and I have a short repeating video set up within a HTML block, based on the adding a video article by Generatepress. However, the video stays large for tablet and mobile and I can’t figure out how to make it responsive.

The HTML code is

<video loop muted autoplay playsinline poster=”http://mysite.com/wp-content/uploads/anypicture.webp&#8221; class=”background-video”>
<source src=”http://mysite.com/wp-content/uploads/anyvideo.mp4&#8243; type=”video/mp4″>
</video>

The page is https://laseruser.com/404

I installed Simple CSS but it doesn’t work with an element and I can’t see how to add CSS to the element.

[Ying]

hi Gareth,

Did you add the CSS to the documentation?

If not, you can add the CSS to customizer > additional CSS.

[Gareth]

Hi Ying,

I added the following CSS to customizer > additional CSS

.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

The video on desktop became slightly smaller, but is still too large on the tablet and mobile

[Fernando]

Hi Gareth,

Can you try the steps here instead?: https://docs.generatepress.com/article/adding-a-background-video/

[Gareth]

That seems to have done it. Thanks

[Fernando]

You’re welcome, Gareth!

[Author]

Posts