Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196
News

How to get perfect responsive video

Responsive video can be difficult to get right. Even if the video sizes down proportionately, there may be issues with the type of media player putting black bars around the video.

Responsive video can be difficult to get right. Even if the video sizes down proportionately, there may be issues with the type of media player putting black bars around the video.

PerfectRWDvideo

There is a nice technique to eliminate this, and it relies on having one piece of information: the video’s aspect ratio. Thankfully, most modern videos are 16:9, and only rarely 4:3, so 16:9 is a safe default.
The technique is to take a wrapping element with a height of 0, and a padding-bottom value calculated from the aspect ratio. So 16:9 would be 9 / 16 * 100, or 56.25 per cent. Inside this wrapping element is the iframe, or video element which is absolutely positioned to fill the space.

[data-aspect-ratio="16:9"] { position: relative; height:0; padding-bottom: 56.25%; } iframe { position: absolute; top:0; left:0; right:0; bottom:0; width: 100%; height: 100%; }
×