
Tagged: full screen video
-
AuthorPosts
-
July 9, 2025 at 4:14 pm #1486520
Hi Team,
Hope you are well!
I’m trying to get a full-screen video in a colour section to fill the entire page with a transparent header, but I either have black bars above and below or to the sides of the video. It seems intermittent as to where the black bars go. The video is in the media library.
What am I doing wrong?
Many thanks in advance,
Ben
July 9, 2025 at 7:21 pm #1486526so your video is inside media library ? and should be placed as html5 video!
you can force even background-videos inside color-sections to be that way – or video element inside a color-section – but my prefered way is to use codeblock element. – if you do not like that solution- tell me how you like to do it.
see here example and code to use:
https://webers-testseite.de/html5-video-embed/
or
https://webers-testseite.de/html5-video-bhe/July 9, 2025 at 7:43 pm #1486535Hi,
Thanks for helping out @guenni007. Did that answer your question @Ben? If not, then please post a link to where we can see the actual element on your site.
Best regards,
RikardJuly 9, 2025 at 10:04 pm #1486545Hi, I appreciate @guenni007 reply but sadly I could not understand what he meant.
I’ve pasted the link below. It’s on desktop screens where the issue is visible.
Many thanks in advance, you guys are the best!
July 10, 2025 at 10:50 am #1486588but you have read the instruction:
this is the content of my code-block element inside a color-section
custom class on that color-section is: html5-videothe css code isn’t all needed if you do not want to have an overlay over the video ( other enfold elements )
this is then sufficient:#top .html5-video .responsive-video { width: 100%; height: auto; display: block; } .responsive #top #wrap_all .html5-video .container { max-width: 100% !important; width: 100%; padding: 0; } #top .html5-video .content { padding: 0; }
But i will make a color-section solution with background video and the needed css for you now
July 10, 2025 at 11:03 am #1486589Hi @guenni007,
Thanks for your assistance.
I have added your custom CSS and applied the class .html5-video to the color-section but I still have black bars top and bottom of the video.
I have also purged the caches.
Hopefully, you can help me?
Many thanks in advance,
Ben
July 10, 2025 at 11:48 am #1486591and you inserted that video with code-block element as described.
Please send me the link to your page. ( contact under my avatar )___________
Solution for color-section and background-video:
First – you had to know what aspect ratio is your selfhosted video!
you had to insert this to the color-section when you fill out the elements options:
in most cases it will be a 16/9 video aspect ratio. – if not you can insert there a different value.
then have a look to: https://webers-testseite.de/html5-video-ben/
July 10, 2025 at 5:55 pm #1486610Ah perfect! That’s fixed it. Thank you so much!
-
AuthorPosts
- You must be logged in to reply to this topic.