The videos that WPeMatico adds to your posts, from YouTube, Vimeo or any other feed, are usually embedded with a fixed width and height. On a phone they can overflow the screen or look cut. You can make them responsive, so they always fill the width of the content and keep their proportions.
Add these rules to your site. In classic themes, go to Appearance β Customize β Additional CSS. In block themes, go to Appearance β Editor β Styles and open Additional CSS.
iframe[src*="youtube.com"],
iframe[src*="vimeo.com"] {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}
The rules find the YouTube and Vimeo players by their address (youtube.com/embed/β¦ and player.vimeo.com/video/β¦), so you don’t need to add any class to the videos. They take the full width of the content and calculate their height automatically. It works with the videos embedded as <iframe> and also with the ones added with the shortcode.
The YouTube and Vimeo campaign types have the option Use , which inserts the video with the WordPress shortcode instead of an <iframe>. For those videos, you can add this filter to the functions.php file of your (child) theme. It wraps each video in a <div> with the class wpem-video-container:
add_filter('embed_oembed_html', 'etruel_oembed_html', 99, 4);
function etruel_oembed_html($html, $url, $attr, $post_id) {
return '<div class="wpem-video-container">' . $html . '</div>';
}
Then add the styles of the container to the style.css of your theme, or to the Additional CSS:
.wpem-video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.wpem-video-container iframe,
.wpem-video-container object,
.wpem-video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Note: This filter only works with the videos added with . The videos that come as <iframe> in the content of the feed are not affected, so for them use the first method.