How do I get the video to resize for the width of the screen? I don't want only a portion of the video (center/middle) to show on smaller screens. I would like the entire video to resize like on this site's homepage at top: https://www.anchoandagave.com/. Video and window get smaller proportionately for the viewing width.
Hello??? How do I get the video width to resize to screen width? The video is cutoff on medium/smaller screens.
I am finishing up this site for my client but this issue is left unresolved. Is there a way to have the video auto-size to the width of the viewing window PROPORTIONATELY? Currently it crops off the video left and right so you only see a portion of the video in the middle. View current site in development here: https://www.miguelsmextexcafe.com/DEV/index.php. And an example of what we need to the video to do on this homepage: www.anchoandagave.com
Hello,
Thanks for your Patience and Apologies for the delayed response!
By default, a video placed in the Slider Section uses background-size: cover, so it is "centered" and cropped on the left and right at smaller widths to fill the entire Section. To make the video resize Proportionately to the Viewing Width instead of being cropped, please add the following code in your css/custom.css File:
@media (max-width: 991px) {
.video-wrap video {
object-fit: contain !important;
width: 100% !important;
height: auto !important;
background: #000;
left: 0 !important;
margin: 0 !important;
}
}This will make the video Shrink to fit the Width of the Device instead of being Cropped on smaller Screens. You can change the max-width breakpoint value as per your requirement.
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
I have added this code to the custom.css. The video resizes proportionately, but there is space below the video at the smaller widths. The next section is coded with 'header-stick' and should move up when the video is smaller.
I've had to launch the site with the video as it was originally - cropping off at small/medium screen widths. My client is still expecting me to fix it however and you have not replied. I had to overwrite your "fix" above to launch, but as I explained that fixed the width issue, but the height or margin (I'm not sure) left a big gap underneath/background fill color that was formally filled with the video.
Hello,
Apologies for the delays in replying.
We are looking into this and get back to you within 2 hours with the full solution.
Thanks for your Patience.
Meanwhile, do let us know if we can help you out with anything else.
hello. I don't see an update to this issue.
Hello,
Thanks for your Patience!
Consider using this CSS code:
<style>
.video-wrap video {
position: relative !important;
object-fit: contain !important;
width: 100% !important;
height: auto !important;
background: #000;
left: 0 !important;
margin: 0 !important;
}
</style>and this for HTML:
<section id="slider" class="slider-element h-auto">
<div class="video-wrap position-relative customjs no-placeholder">
<video poster="images/videos/miguels-video-poster-home.jpg" preload="auto" loop autoplay muted playsinline>
<source src='images/videos/miguels-home-070426.mp4' type='video/mp4'>
</video>
</div>
</section>This would make the Video Responsive across all devices with proper scaling. Also please do note that there are numerous HTML Validation issues on page which we would recommend you fixing in order to avoid unexpected issues: https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.miguelsmextexcafe.com%2F .
Hope this Helps.
The video doesn't even appear with this code. See here: https://www.miguelsmextexcafe.com/index-testing.php
Hello,
Thanks for reporting this. Consider using this HTML Code:
<section id="slider" class="slider-element h-auto">
<div class="video-wrap position-relative customjs no-placeholder z-1">
<video class="d-block" poster="images/videos/miguels-video-poster-home.jpg" preload="auto" loop autoplay muted playsinline>
<source src='images/videos/miguels-home-070426.mp4' type='video/mp4'>
</video>
</div>
</section>This should fix the issue.
Wonderful! We have a solution. Thank you for your assistance.
Hello,
No Problem at all! :) We are more than happy to help.
Glad to hear the solution worked for you. If you run into any other issues while finishing the site, feel free to reach out and we will be happy to assist.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard