- This topic has 5 replies, 3 voices, and was last updated 3 years, 3 months ago by
.
-
Posts
-
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.
Customer Support
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
Customer Support
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!
- You must be logged in to reply to this topic.
