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.
Leave a Comment