Hello I have a video I’m trying to embed into a custom code block in full width. I’m able to get the video to display and autoplay but have tried a dozen different ways to get it full width with no luck. Can anyone assist? Here is current code:
@acjnas any ideas?
Hi dramirez,
I had a similar problem. Also I wanted to display text/ buttons on the video itself. The solution for me was to use a Hero block, add the video via frontend and use the following code. It works for desktop versions. Mobile is another story. Here i had to convert it into a GIF to be autoplayed and put it into another block, that is only visible for mobile devices. Maybe it helps:
#hero3 { position: relative; overflow: hidden; z-index: 10; /* Higher z-index to prevent overlap */ } #hero3 video { position: relative; min-width: 100%; /* Ensure the video covers the full width */ min-height: 100%; /* Ensure the video covers the full height */ width: auto; /* Allow width to scale */ height: auto; /* Allow height to scale */ opacity: 90%; } #hero3 > section > div > div > div:first-child { z-index: 20; /* Keep this to ensure content is above the video */ position: absolute; left: 50%; top: 80%; transform: translate(-50%, -50%); } #hero3 section, #hero3 .container, #hero3 .container > div { height: 100%; } #hero3 .container{ max-width: 100%; padding-right: 0; padding-left: 0; }EDIT: I don´t know how to insert code to be properly displayes here
