Further below I will also show a responsive iFrame Embed.
The default view of a Youtube url embeded into a post or page:
I am using the intro to Duplicator Pro as an example.)
Change the alignment of a video embed
Default alignment of a video embed is left. To change the alignment to right use the following code:
Inside your child theme functions.php file or a code snippet plugin:
function video_embed_html( $html ) {
return '<div class="video-container">' . $html . '</div>';
}
add_filter( 'embed_oembed_html', 'video_embed_html', 10 );
The code adds the css class video container around the embeded video.
Inside your style.css file:
.video-container {
text-align: right;
}
Change the size of a video embed
To change the default size of a video embed add the following code:
Inside your child theme functions.php file:
/* Bigger embed size https://cantonbecker.com/work/musings/2011/how-to-change-automatic-wordpress-youtube-embed-size-width/ */
add_filter( 'embed_defaults', 'bigger_embed_size' );
function bigger_embed_size()
{
return array( 'width' => 900, 'height' => 430 );
}
Experiment with different widths and heights.
Responsive video embed
To be sure a video covers the available space and becomes responsive at different browser sizes.
Adjust the video container and add the following code to your style.css file:
(NB! Remember to also add the code to the functions.php file mentioned above.)
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Experiment with the code.
Responsive iFrame Embed
Add the following:
<div class="container">
<iframe src="//www.youtube.com/embed/yCOY82UdFrw"
frameborder="0" allowfullscreen class="video"></iframe>
</div>
The code adds a class to which you can add CSS to.
The CSS:
.container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Code from: https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed
Resources
https://www.wpstuffs.com/youtube-videos-responsive-wordpress/
https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
https://developer.wordpress.org/reference/hooks/embed_oembed_html/
https://scottnelle.com/794/wordpress-and-the-youtube-iframe-api/
A thanks to Dan for his help for some of the in order code.