How to Change the Size of a Video on WordPress

Last modified on October 9th, 2020

A video embedded in WordPress will automatically be set to the default size (unless adjusted elsewhere):

500px by 281px (16:9)

To change the default video size, you can either:

• Add a Small Bit of Code to Your functions.php File:
• Add Some Additional CSS Code:

Further Info:

• Video on – Changing the Size of a Video (in WordPress):
• WordPress Reference:

---

Add a Small Bit of Code to Your functions.php File:

Add the following code to your functions.php file:

// Theme Support
function wp_theme_setup(){
// Add support for responsive embeds.
add_theme_support( 'responsive-embeds' );
}
add_action('after_setup_theme', 'wp_theme_setup');
}

Default Video size:

Increase the video size – using the functions.php file:

Placing this code in your functions.php file, changes the embedded video size to full size (containing it within the column width).

---

Add Some Additional CSS Code:

You can add the CSS code below, without having to add additional code to your functions.php file. I prefer the CSS method for changing the video size, as it allows for easy adjustment and positioning.

• Add the following CSS code:
• The Video Caption is Missing – How to Rectify:
• Adjusting the Video Size Further:

You can add the following CSS code:

/* Change the size of an embedded block */
figure.wp-block-embed.is-type-video {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /*16:9*/
}
figure.wp-block-embed.is-type-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Using CSS (but the video caption is missing?):

This gives you a full width embedded block for your video (credit for this goes to jasomdotnet).

The Video Caption is Missing – How to Rectify:

However, if you have a caption at the bottom of your video, it can disappear. So I updated the CSS to prevent this happening, by replacing:

figure.wp-block-embed.is-type-video

with:

.wp-block-embed__wrapper

Example code below:

/* Change the size of an embedded block */
.wp-block-embed__wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /*16:9*/
}
figure.wp-block-embed.is-type-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Using CSS (making the video caption visible):

The caption text now shows up correctly at the bottom of the video.

Adjusting the Video Size Further (adding margins):

Making the video full size isn’t always what you want. You can make adjustments by playing around with the CSS. In this case I have added margins to the left and right of the video (don’t forget to reduce the width of the video accordingly, so that the overall width equals 100%).

• Changing the width from 100% to 90%.
• Adding left and right margins of 5% each = 10%

Total width = 100% (90% + 10%)

• We also need to change the padding at the bottom to 90%

16:9 ratio (at 100% width) = padding-bottom: 56.25%;

Therefore, 16:9 ratio (at 90% width)  =  padding-bottom: 50.625%;

/* Change the size of an embedded block */
.wp-block-embed__wrapper {
  position: relative;
  width: 90%;
  /* width 90% - See margin-left, margin-right and padding-Bottom */
  margin-left: 5%;
  margin-right: 5%;
  height: 0;
  /* 16:9 ratio = 56.25%, therefore 90% width = 50.625% */
  padding-bottom: 50.625%;
}
figure.wp-block-embed.is-type-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

---

Video – Changing the Size of a Video (in WordPress)

---

WordPress Reference for Embed’s:

For further details on how WordPress embeds a video see the WordPress reference:

• Hooks/embed_defaults.
• wp-includes/embed.php.