Omry Biton
Member
The theme currently does not support YouTube video Responsive
I recommend adding this to your next update!
Paste code to functions.php file ↓
function wpse_embed_oembed_html( $cache, $url, $attr, $post_ID ) {
$classes = array();
// Add these classes to all embeds.
$classes_all = array(
'responsive-container',
);
// Check for different providers and add appropriate classes.
if ( false !== strpos( $url, 'vimeo.com' ) ) {
$classes[] = 'vimeo';
}
if ( false !== strpos( $url, 'youtube.com' ) ) {
$classes[] = 'youtube';
}
$classes = array_merge( $classes, $classes_all );
return '<div class="' . esc_attr( implode( $classes, ' ' ) ) . '">' . $cache . '</div>';
}
add_filter( 'embed_oembed_html', 'wpse_embed_oembed_html', 99, 4 );
And in the CSS file, copy the following code
.responsive-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 0;
height: 0;
overflow: hidden;
}
.responsive-container iframe,
.responsive-container object,
.responsive-container embed,
.responsive-container video,
.responsive-container .youtube,
.responsive-container .vimeo
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
I recommend adding this to your next update!
Paste code to functions.php file ↓
function wpse_embed_oembed_html( $cache, $url, $attr, $post_ID ) {
$classes = array();
// Add these classes to all embeds.
$classes_all = array(
'responsive-container',
);
// Check for different providers and add appropriate classes.
if ( false !== strpos( $url, 'vimeo.com' ) ) {
$classes[] = 'vimeo';
}
if ( false !== strpos( $url, 'youtube.com' ) ) {
$classes[] = 'youtube';
}
$classes = array_merge( $classes, $classes_all );
return '<div class="' . esc_attr( implode( $classes, ' ' ) ) . '">' . $cache . '</div>';
}
add_filter( 'embed_oembed_html', 'wpse_embed_oembed_html', 99, 4 );
And in the CSS file, copy the following code
.responsive-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 0;
height: 0;
overflow: hidden;
}
.responsive-container iframe,
.responsive-container object,
.responsive-container embed,
.responsive-container video,
.responsive-container .youtube,
.responsive-container .vimeo
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}