Customizing a video embed in WordPress.

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:

function video_embed_html( $html ) { 
    return '<div class="video-container">' . $html . '</div>'; 
    } 
add_filter( 'embed_oembed_html', 'video_embed_html', 10 );

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>

Adds a class to which you can add CSS to.

Use this 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.