Table of Contents
Embedded videos can enhance your website’s content but often cause layout shifts, increasing Cumulative Layout Shift (CLS). Minimizing CLS is crucial for providing a smooth user experience and improving your site’s Core Web Vitals score. Here are best practices to handle embedded videos effectively.
Use Static Size Attributes
Always specify width and height attributes for your embedded videos. This reserves space on the page before the video loads, preventing layout shifts. For example:
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/example” frameborder=”0″ allowfullscreen></iframe>
Implement CSS Aspect Ratios
If you prefer responsive videos, use CSS aspect ratios. This technique maintains the video’s aspect ratio regardless of screen size, preventing shifts during load. Example:
<style> .video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style>
<div class=”video-container”> <iframe src=”https://www.youtube.com/embed/example” frameborder=”0″ allowfullscreen></iframe> </div>
Lazy Load Videos
Lazy loading defers the loading of videos until they are about to enter the viewport. This reduces initial load time and prevents layout shifts. Use plugins or native lazy loading:
<iframe loading=”lazy” src=”https://www.youtube.com/embed/example” width=”560″ height=”315″ frameborder=”0″ allowfullscreen></iframe>
Use Placeholder Content
Display a static placeholder or thumbnail before the video loads. This gives users a visual cue and maintains layout stability. For example:
<img src=”thumbnail.jpg” width=”560″ height=”315″ alt=”Video thumbnail”>
Replace the placeholder with the video once the user interacts, such as clicking a play button.
Summary
Handling embedded videos carefully can significantly reduce CLS on your website. Use fixed size attributes, implement responsive aspect ratios, enable lazy loading, and provide placeholders. These practices ensure a better user experience and improved website performance.