Because I hate the term responsive.
When embedding videos from many of the video sources, the iframe code usually contains a fixed width and height. This often results in videos spilling out of the home container when view on smaller viewports; such as mobile phones. It is possible to make the video container dynamic so that it can adjust to the width of the viewport. This was mentioned several times over at Boonex but it was never considered important enough for Boonex to make the simple code changes. Since so many people use mobile phones for viewing our sites, we want them to be as user friendly as possible for mobile users. I rarely use a phone for viewing web content myself but I do understand the need. Since we have control over the platform we can do simple things that will make Cheetah a better product.
To make embedded videos; such as those from YouTube, dynamic, we simply need to make a few changes in the template and add in some CSS to handle the resizing.
From https://basicuse.net/articles/pl/textile/html_css/resizing_youtube_and_html5_videos_proportionally_using_css_for_responsive_web_design
.video-responsive {
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
}
.video-responsive iframe,
.video-responsive object,
.video-responsive embed,
.video-responsive video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
We can also do checks to see what the aspect ratio is for the embedded video and adjust for different aspect ratios so that the display is as nice as possible.
