Website tutorial 01: Video display in different mode (Full screen, background, embed, control heights etc.)
It has been a while i didn’t post a blog post. I will keep this section/category blog post up to date from time to time (hopefully) as it will be easy for me to explain the modules/website design tips via this blog post. Hope you enjoy and learn something from this, even you are not our client, you are welcome to share, keep, bookmark, save this article.
If it is helpful, do like our page so we can keep you posted.
FIY, this tutorial is based on WordPress + Elementor Pro + Custom CSS.
Control display sizes of video/embedded videos/iframe
Most frequently asked questions from most of our client is about how to control the display sizes of the video, especially the embedded video or iframe content. Well, there are many ways to do this, with Elementor you can easily adjust the display sizes without code needed, however, we do included some CSS tips incase you need to adjust it’s height according to your preferences, and this still can be done within Elementor page builder.
Video in full width mode
Only work if your section is full width and as background video, but as web browser limited embed video by default will have no sound, so it is muted. However height is depend how you set the section height. By pixel, viewer height, viewer width or fixed height etc.
Video in normal embed mode
Normal video with embed mode, as your content is set to max 1280 width, when screen above this width, it will show empty space on both side, however it is with sound by default. And nothing will be cut or zoom.
Video in normal embed mode with full width
Normal video with embed mode, as section set to full width, when screen is above 1280pixel width, the video will be scale to fit the width, however height is not able to control since it is scale by ratio.
Video in full width (normal embed mode) with css control it's height when above 1280px screen resolution
If you would like to control the video height for certain screen resolution, then you will have to play around with css. When you apply this, for screen above 1280pixel, this video will resize it’s height to 60% viewer screen height. But as screen ratio, it will have black bar on both side Example:
/* under section > Advanced > Custom CSS */
@media only screen and (min-width: 1280px) {
selector, selector embed, selector video, selector iframe, selector .elementor-container {
height: 60vh;
}
selector .elementor-fit-aspect-ratio {
padding-bottom: 38%;
}
}
