Can I keep it 16:9 ratio instead of 100% vh?
jiang-yuan opened this issue · 6 comments
Can I keep it 16:9 ratio instead of 100% vh?
@jiang-yuan hey, you can use an empty SVG or an image to maintain the ratio of the container. I'll embed this option in the next version as well.
Good. I will wait for your next version.
@jiang-yuan hey, I gave it some thought, and it doesn't make sense to add the support for spacer since this is just a background.
You can put this in the container witht the video background: <svg aria-hidden="true" width="16" height="9" style="width: 100%; height: auto; visibility: hidden; pointer-events: none;"></svg>
This will act as a spacer that will make the container scale responsively in the ratio 16:9. You should also remove the height: 100vh from your css/scss. If I understood correctly what you need that is.
Thank you. I'll give you feedback after I try it.
I am using elementor now and am a little confused about which container I can add svg.
I am currently setting a video background for elementor:
Add a class to a full-width section (eg: video-bg)
Then, add a CSS like this : .video-bg { height: 56.25vw; }
But there are two problems: 1) as you mentioned, I set 3 video background on my home page, the dev tools shows that elementor loads 3 times related js files from youtube. 2) lazy-loading iframe does not work.
Your plugin will be lighter and possible to allow lazy-load by WordPress.
I think I had better wait for your next version.
Hey @jiang-yuan so sorry for the late reply and a late action on this. I'm not so familiar with Elementor, but probably you can add the SVG code as a custom HTML to the section, or add it as an image, but you would first need to create that file and uplaod it as an image.
I've fixed the issue with the multiple YouTube script loads and I've added a property for lazy loading. I've also made multitude of imporvements like that the video pauses when it is not visible improving the performance of the page the video is on.
Do try the latest version v1.0.22.
Cheers! 🥂