Archived topic
Video is too big for mobile and tablet
5 replies · Started by Gareth on February 23, 2023
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" class="background-video">
<source src="http://mysite.com/wp-content/uploads/anyvideo.mp4" 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.
hi Gareth,
Did you add the CSS to the documentation?
If not, you can add the CSS to customizer > additional CSS.
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
Hi Gareth,
Can you try the steps here instead?: https://docs.generatepress.com/article/adding-a-background-video/
That seems to have done it. Thanks
You're welcome, Gareth!
