A Guide to Responsive Design for HTML5 Video

Rahul Nanwani -

Video content has become an intrinsic part of our day-to-day lives. Whether following the latest vlogger on our phones or watching OTT shows on our TVs, a day rarely goes by without us engaging with some form of video content. Being such an important part, you must provide your users with the most optimal viewing experience and allow them to immerse themselves in the content they consume fully. However, not all screens are created equal. This digital landscape is far from uniform, with screens varying greatly in size and capabilities.

This is where the concept of responsive web design for video comes into play. Read on to discover how to optimize videos for every screen as we delve into responsive HTML5 web design.

But first, what is Responsive Video?

Responsive video is the science (and art) of designing/formatting videos on websites so that they dynamically adjust their size and layout to fit various screen sizes and orientations, ensuring an optimal viewing experience across different devices, whether your viewers are on smartphones, tablets, desktop computers, or large screen TVs.

At its core, responsive video design aims to prevent videos from overflowing their containers, becoming pixelated or distorted, or requiring users to zoom in/out to watch the content – all of which lead to loss of engagement and viewer churn.

This is the broader philosophy of responsive web design, where websites adapt their layout and content to provide an optimal user experience across a wide spectrum of screen sizes and resolutions while ensuring good usability.

How To Make Videos Responsive?

For web developers and designers, embedding these responsive videos poses several challenges like aspect ratio preservation, screen size/resolution/orientation disparity for different consumer devices, browser/device API compatibility, and more. But fear not – there are battle-tested design principles and best practices you can follow to tackle these challenges head-on.

Today, we’ll explore three such techniques: leveraging CSS properties and media queries, utilizing Bootstrap's built-in ratio classes for consistent responsiveness, and adopting the intrinsic ratio technique with iframe embeds to maintain aspect ratios.

Let’s get started!

1. CSS – Using Width and Max Width Properties

A widespread practice in embedding videos on websites is to assign static values to the height and width properties of the video element. The native HTML5 approach for this looks like the following:

<video width="400" height="250" ...>
  <source src="..." />
</video>

This approach is simple but has a major drawback: the video's size remains fixed and doesn’t adapt to different screen sizes. If the parent container becomes narrower than these declared sizes, the video can overflow, resulting in a suboptimal user experience. The image below shows how the video has overflowed to the visible screen.

To address this, offering a fluid width, such as 100%, is preferable, allowing the video to adjust dynamically based on the parent container's size. A percentage-based fluid width would mean that the width of the video container/embedded video changes automatically and proportionally to screen size, saving you the trouble of accommodating every possible device/screen size.

However, preserving the video's aspect ratio is crucial to prevent fluid dimension distortion. To maintain the aspect ratio, you should only set the video's width and let the height adjust automatically.

You can do this in HTML5 by setting the element's width attribute to 100%. Now, the video element's width will dynamically adjust to the width of its containing element, usually the parent <div> or another container.

 <video width="100%" controls>
    	<source src="video.mp4" type="video/mp4">
    	Your browser does not support the video tag.
 </video>

But the more scalable and fine-grained way of doing this is through CSS. Here, you target the <video> element by its ID or class name and set its width and height as follows:

.video-container {
  height: auto;
  width: 100%;
}

The CSS max-width property can also help you create a responsive design for video elements by preventing them from exceeding a certain width while allowing the height to adjust proportionally to maintain the video’s original aspect ratio.

.video-container {
    	max-width: 100%; /* Set a pixel value instead if no parent container*/
    	margin: 0 auto; /* Center the container */
	}
.video-container video {
    	width: 100%; /* Fill the available width */
    	height: auto; /* Adjust height automatically */
}


If the screen size becomes smaller than this specified max-width, the video will shrink along with the container, preventing it from overflowing or causing horizontal scrolling. While the video can scale down as necessary, it will never scale up beyond its original size.

Advantages of using CSS for responsive video design

  • Simplicity and Readability: CSS properties like width and max-width are straightforward and easy to write and read. Designers and developers alike can quickly grasp and apply the concept, as it doesn’t add much complexity to your codebase.
  • Aspect Ratio Preservation:  By setting the width to a fluid unit like 100% and then using max-width, the aspect ratio of the video is maintained automatically, ensuring videos appear correctly, without distortion, on various devices and screen sizes, providing a visually consistent experience.
  • Cross-Browser Compatibility: CSS-based responsive video design is generally well-supported across modern browsers. The width and max-width properties are part of the CSS standard, reducing the likelihood of compatibility issues compared to relying on specific JavaScript libraries or browser-specific features.

Disadvantages of using CSS for responsive video design

  • Lack of Control Over Scaling Up: Even though the max-width property prevents a video from stretching beyond a specific width, it doesn't offer granular control over its exact dimensions at various viewport sizes (which might require using a CSS framework or JavaScript). This limitation can be felt when aiming for intricate designs or when specific positioning and interactions are required.
  • Complex Layouts are Difficult: When working with multi-column layouts or complex grid systems, ensuring responsive video behavior only using CSS properties like width and max-width can become more intricate and error-prone.

Having explored fluid design with vanilla CSS only, let's now look at how the Bootstrap framework streamlines all of this for us, with its dedicated ratio helpers for HTML5 video.

2. The Bootstrap Framework – Using Ratios

Bootstrap is a free and open-source frontend framework that helps you create responsive websites faster with pre-designed, standardized design elements that devs can use as building blocks for consistent, modern UI/UX. It also contains components that make it easier for you to create attractive and functional web designs without starting from scratch.

The Ratio Class

One of Bootstrap's utilities is the ratio class, tailored to help elements maintain their desired aspect ratios. This utility is handy for multimedia elements such as iframe, embed, video, and object. The ratio class is applied to a parent element, ensuring its child elements are responsive. To specify the desired aspect ratio, you pair the ratio class with another class defining that aspect ratio.

  • ratio-1x1: For maintaining a 1:1 ratio, like 480x480 pixels.
  • ratio-4x3: For maintaining a 4:3 ratio, like 1024x768 pixels.
  • ratio-16x9: For maintaining 16:9 ratio, like 1920x1080 pixels
  • ratio-21x9: For maintaining 21:9 ratio, like 2560x1080 pixels

Given that many videos adhere to a 16:9 aspect ratio, embedding a responsive video using Bootstrap can be achieved with the following code:

<div class="ratio ratio-16x9">
  <video>
    <source src="..." />
  </video>
</div>

The child video element inherits responsive behavior by incorporating the ratio and ratio-16x9 classes into the wrapping div. This will create a responsive embed of a video in your HTML page. You can check out the third embed in this pen to visualize the responsive embed.

Using Custom Ratios

The one-size-fits-all approach might not work when working with videos to maintain their aspect ratios. There might be situations where you want to create your own ratio. This is also possible with Bootstrap. You can override the ratio-* class to create your own ratios. For example, let’s say you want to create a 2x1 ratio, here’s the sample code to do so:

<div class="ratio" style="--bs-aspect-ratio: 50%;">
  <video>
    <source src="..." />
  </video>
</div>

The --bs-aspect-ratio: 50%; creates a 2x1 aspect ratio. To know more about custom ratios in Bootstrap, you can follow their official documentation.

Advantages of using Bootstrap’s Ratios

  • Convenience: The framework provides ready-to-use aspect ratio classes that significantly reduce the time and effort required to make videos responsive. Only needing to apply a single class for responsive video embeds ensures rapid iteration and development.
  • Consistency: Bootstrap ensures that your responsive videos are consistently displayed across various browsers and devices. The Bootstrap grid system is well-known, well-documented, and commonplace.
  • Easy Integration: Integrating Bootstrap into your website is very simple. You can either install it using NPM or use their CDN links, and the ratios helper classes can be quickly integrated into Bootstrap projects without the need for extensive configuration or coding.

Disadvantages of using Bootstrap’s Ratios

  • Dependency on Bootstrap: Using the embed ratios class ties your project to the Bootstrap framework. While this might be advantageous if you're already using Bootstrap for other components, it can be limiting if you're not interested in using the entire framework, are migrating to something more modern, or if you have specific design requirements that don't align with Bootstrap's styling.
  • Limited Customization: The Ratio helper is a great set-and-forget option, but if you require fine-grained control over video positioning, interactions, or styling, Bootstrap might not provide as much flexibility.
  • Learning Curve: For complete beginners, there might be a slight learning curve in understanding Bootstrap's grid system and classes. While it is well-documented and many learning materials are available, this will still take some extra effort over vanilla CSS.

Iframe embeds with the intrinsic ratio technique are another way to achieve responsive videos on your websites. Let’s discuss them now.

3. Using Intrinsic Ratios

The intrinsic ratio technique is a tried and tested method for embedding content responsively, especially for embedding videos or iframes. This technique allows videos or other embedded content, to maintain their aspect ratio, regardless of the width of their containing element.

The intrinsic ratio technique works as follows:

  • Wrapper: The video is wrapped inside a container div.
  • Relative Positioning: This container div is given a relative position.
  • Padding-bottom: The real trick lies with the padding-bottom of the container. This padding is set to a percentage corresponding to the content's aspect ratio. For a 16:9 video, the padding-bottom would be 56.25%, i.e., 9 divided by 16.
  • Absolute Positioning of the iframe: The iframe inside this container is then positioned absolutely, spanning its parent's full width and height.

For example, a 16:9 ratio video can be embedded like this:

<div class="video-wrapper">
  <iframe class="responsive-iframe" src="https://www.youtube.com/embed/0cTpTMl8kFY"></iframe>
</div>

And the CSS styles for this should be like this:

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

Let’s briefly understand the code now:

  • Wrapper: The iframe is enclosed within a <div> container containing a video-wrapper class. This wrapper div plays a crucial role, serving as the reference point for the size and position of the internal <iframe>.
  • Relative Positioning: In the CSS, the video-wrapper class gives the container div a position: relative; attribute. This means that while the container itself will be positioned normally within the flow of the page, it creates a contextual layer in which child elements like the <iframe> are positioned absolutely.
  • Padding Bottom: As discussed earlier, the real magic for maintaining the aspect ratio comes from the padding-bottom property. In this case, for a 16:9 video ratio, the calculation is 9 divided by 16, which equals 0.5625 or 56.25% is used for the bottom padding. By setting padding as a percentage, based on the width of the containing block, we ensure that the height of the container is always proportional to its width.
  • Absolute Positioning of the iframe: Lastly, the <iframe> inside the container is styled with position: absolute;. This ensures it's positioned relative to the .video-wrapper and occupies the full width and height of the wrapper. The top and left properties set to 0 ensure the iframe is always aligned to the top-left corner of the parent container.

Using these styles, the video retains its aspect ratio irrespective of the viewport's width, making it truly responsive.

Advantages of using Intrinsic Ratios

  • Optimal Use of Screen Space: The intrinsic ratios method ensures that both width and height adjust proportionally, utilizing the entire available screen space efficiently. This approach enhances the use of the viewport, especially when compared to fixed-width or max-width solutions that sometimes leave unused space on larger screens.
  • Best of both worlds: This technique is a natural extension of fluid design (as covered in Point #1) with awareness of aspect ratio preservation, while ensuring browser compatibility, and without needing a CSS framework like Bootstrap. This blend ensures that not only does the embed maintain its proportions, but so does any accompanying content inside the container.
  • Supports Various Embed Types: The intrinsic ratios method is not limited to <video> alone; it can be applied to all types of embedded content, especially iframes. This versatility makes it uniquely valuable, as it adapts uniformly without needing custom adjustments for each piece of content.

Disadvantages of using Intrinsic Ratios

  • Extra Markup: This method requires additional HTML and CSS to ensure correct aspect ratio behavior. This might require developers to understand the underlying principles and invest time in crafting the appropriate styles, which they might find tedious.
  • Impacts Code Readability: Applying the intrinsic ratios method often leads to complex CSS, negatively affecting readability for complex layouts. Understanding and maintaining this code can quickly become challenging, especially for new developers joining the team.

If you want to explore the techniques or see them in action, you can fork this pen from Codepen. The last embed in the mentioned Codepen shows this technique.

Now that you know how videos can be embedded responsively to your websites, let’s discuss a few best practices.

Best Practices for Embedding Responsive HTML5 Video

Without understanding the best practices, embedding videos to your website might result in a bad user experience and a slow website. In this section, let’s discuss the three most common best practices you should keep in mind when embedding videos:

1. Optimize for Mobile First

With the increasing prevalence of mobile devices for web browsing, optimizing videos for mobile performance is crucial to provide a smooth user experience. For design, focus on the mobile experience before scaling up to larger screens like desktops and tablets. Factors other than design alone must also be taken into account. Here’s a quick checklist:

  • Lazy Loading: Lazy load your videos only when it comes into the user's view. This approach can improve initial page load times, especially on mobile devices with limited bandwidth and processing power.

    But bear in mind that you shouldn’t implement lazy loading for every single video on your page – this will affect Largest Contentful Paint (LCP) measurements, negatively affecting your Google Core Web Vitals score, and hence, search ranking. You should set priorities for loading elements based on their importance. Load elements that are visible above the fold first, and then progressively load others as the user scrolls.
👉
Learn more about lazy loading HTML videos
  • Landscape and Portrait Modes: Design your video container and surrounding content to adapt smoothly to both landscape and portrait orientations. Test extensively in both layout modes, and ensure that content, controls, and overlays remain accessible and visually appealing in both modes.

    For example:  In portrait mode, vertical space is limited, so you’d ensure that controls are easily accessible without blocking essential content. In landscape mode, you might have more horizontal space for control placement.
  • Media Queries: Use media queries in your CSS to apply specific styling for different screen sizes. These queries allow you to optimize the layout, font sizes, spacing, and other design elements as the screen real estate expands (landscape mode) or contracts (portrait mode).
  • Autoplay: Autoplaying videos on mobile devices can lead to unexpected data usage, and is often disruptive to the user experience. If you choose to autoplay videos, make sure it's a deliberate design choice, and provide clear controls for users to pause or mute the video easily. Nothing increases bounce rates more than a website or app that annoys the user on the first visit.
  • Responsive Controls: Ensure that the video player controls are appropriately sized for touch interactions on mobile devices. You can use CSS to style the controls to be touch-friendly, with larger, more prominent buttons that are easy to tap.

2. Implement Standard and Accessible Controls.

When embedding responsive videos, it's essential to provide intuitive and engaging video controls and interactive elements that enhance (and not obstruct by being too flashy) the user experience across various devices, including mobile and larger screens. Here are several video controls and interactions that you should consider implementing, regardless of the device you’re designing for:

  • Unambiguous, Intuitive Controls: Play, Pause, Stop, and Volume adjustment controls (including Mute) are fundamental for both mobile and desktop experiences, and you need to make these buttons prominent, allowing users to start and stop video playback and adjust volume with ease, and without any ambiguity. Practicality needs to take priority over attractive design for these basic video controls.
  • Enhanced Seek Functionality: Users should be able to tap on the progress bar to skip forward or rewind. A special consideration needs to be made for mobile UI/UX – because of the smaller touch targets – the progress bar should be thick enough to be interacted with easily. Also, consider incorporating tap gestures to seek forward or backward within the video timeline.
  • Accessibility: For accessibility, Incorporate annotations, timestamps, captions, functional keyboard navigation, and proper ARIA roles and attributes (like using role=”button” on play/pause buttons). These should be mobile-responsive, customizable, and unobtrusive, enhancing the viewer's experience rather than being annoying.
  • Playback Speed Options: Consider providing options for adjusting the playback speed of the video. Some viewers might prefer faster or slower playback, depending on their needs. It is also helpful for users revisiting content.

3. Implement Adaptive Bitrate Streaming

Mobile phones are often bandwidth-limited, or otherwise have to deal with spotty cellular coverage that makes high-resolution streaming infeasible. This is where Adaptive Bitrate Streaming (ABR) comes to the rescue, shifting the task of determining playback quality to the client-side player instead, enhancing user experience, reducing buffering, and delivering the best possible quality given the available resources. This makes it a sensible choice for reaching a broad mobile audience.

ABR protocols like Apple HLS and MPEG DASH adjust video quality in real-time based on the viewer’s network speed and device capabilities. This involves encoding videos at different quality levels, breaking them into chunks, and using an ABR-compatible streaming server. The client-side HTML5 video player then selects the best-fit chunk automatically, ensuring smoother playback and viewer engagement.

👉
Follow this guide to learn about Adaptive Streaming in detail.

Using ImageKit for Video Optimization

ImageKit is an all-in-one cloud-based solution for storing, managing, transforming, optimizing, and delivering responsive HTML5 video. With ImageKit, you can curate great user experiences for video by letting it simplify the intricacies of video optimization, and deliver your videos in optimal quality, format, and size, tailored to each user's device and connectivity, served from a global CDN.

Some standout features of ImageKit include:

  • Automatic video quality optimization:  ImageKit automatically optimizes video files to a version that strikes a good enough balance between file size and visual fidelity, while still letting you tune it. You won’t ever have to use ffmpeg or Handbrake to optimize your videos, all you have to do is upload the highest quality version of the video you have to ImageKit’s Media Library and then turn on Automatic Quality Optimization from the ImageKit dashboard.
  • Automatic Format Conversion: Video formats vary in compatibility across different devices and browsers, and ImageKit takes that worry off your shoulders by automatically picking the most suitable format, enhancing load times and overall compatibility. Instead of you painstakingly creating, storing, and then linking to multiple variants of the same video, ImageKit can work off a single uploaded source. All you have to do is turn on Automatic Format Conversion in the ImageKit dashboard and provide the ImageKit URL for the video in your video tag's src attribute.
  • Adaptive Bitrate Streaming: As mentioned before, ABR is a game changer for web video, dynamically adjusting quality based on the viewer's device and network conditions. Setting up ABR is labor-intensive, but ImageKit streamlines it. No need to render and store different versions of your video at different resolutions/bitrates. Just upload a single source video, and request an ABR-ready version of it using ImageKit’s URL-based API.
  • Real-time Video Transformations: Through a developer-friendly URL-based API, ImageKit empowers users to tweak videos in real time – cropping, resizing, trimming, adjusting quality, adding overlays, and more.

Conclusion

This article showed you three of the most common ways to embed responsive videos on your website. By harnessing the power of CSS properties like width and max-width, you can ensure that your videos adapt fluidly to various screen sizes while maintaining their aspect ratios.

The intrinsic ratio method offers a straightforward solution by combining percentage-based dimensions with padding, guaranteeing that your videos remain both flexible and well-proportioned. For those seeking a more streamlined approach, Bootstrap's pre-built ratio helper classes provide a user-friendly solution.

However, the challenge lies in delivering high-quality, optimized videos, while ensuring swift loading and a top-notch user experience. ImageKit emerges as a savior in this scenario, offering a robust video optimization solution that tackles these challenges.

With these techniques – and ImageKit – in your toolkit, you can ensure that your video content shines on screens of all sizes, capturing your audience's attention and delivering an optimal viewing experience.

Try ImageKit today by signing up for the free plan.