• Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

Easy Web Design Tutorials

WordPress Tutorials and more

  • Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

6 October - 2015 By Paal Joachim Add a Comment
Last updated on: June 20, 2016

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;
}

Right video embed in WordPress

Right video embed in WordPress

 

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.

Right video embed with the size 900x430 in WordPress

Right video embed with the size 900×430 in WordPress

 

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%;
}
Responsive video embed in WordPress.

Responsive video embed in WordPress.

 

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.

Share this:

  • Email

Categories: Developer, How to, WordPress

Paal Joachim Romdahl

I enjoy teaching and creating tutorials. As well creating web sites.
I help people gain WordPress knowledge through my easy to follow tutorials and specialized training. Contact me for more information on how I can improve your WordPress skills and to help get your web site quickly up and running.

Leave a Comment Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2021 · By Easy Web Design Tutorials · Built on the Genesis Framework · WordPress · Log in · ⇪

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.