How to Change the Size of an Embedded YouTube Video in WordPress

When we embed YouTube videos, it comes in the standard size. However, the standard size of embedded YouTube videos doesn’t work in WordPress. It requires you to resize the embedded video directly in the embed code.

This guide will help you change the size of an embedded YouTube video in WordPress.

Step 1: Using the Gutenberg Block Editor

The WordPress Block Editor makes it easy to embed and resize YouTube videos. Here’s how:

1. Embed the YouTube Video

1. Copy the YouTube video URL.
2. In your WordPress editor, add a new block by clicking the + icon.
3. Search for the YouTube block.
4. Paste the URL into the block, and the video will appear.

2. Adjust the Video Size

1. Select the YouTube block in the editor.
2. Click the Settings icon on the right sidebar.
3. Under the ‘Dimensions’ section, you’ll see fields for Width and Height.
4. You can enter the size you want, such as 800 x 450 for a standard widescreen format.
5. Preview your post to ensure the video fits well.

Step 2: Using the Classic Editor

If you’re using the Classic Editor, resizing a YouTube video requires adding some HTML.

1. Embed the YouTube Video

1. Copy the YouTube video URL.
2. Paste the URL directly into the editor.

2. Switch to Text Mode

1. In the Classic Editor, switch from Visual to Text mode.
2. You’ll see the YouTube link as plain text.

3. Add an iframe Tag

Replace the YouTube URL with an iframe code to control the size:

<iframe width=”800″ height=”450″ src=”https://www.youtube.com/embed/VIDEO_ID” frameborder=”0″ allowfullscreen></iframe>

• Replace VIDEO_ID with the actual ID from your YouTube URL (e.g., for https://www.youtube.com/watch?v=abc123, the ID is abc123).
• Adjust the width and height values to your desired size.

Step 3: Using a Plugin

If you want more control or need a more straightforward solution, you can use a plugin to resize embedded videos.

Recommended Plugins:

1. Advanced Responsive Video Embedder (ARVE): Automatically adjusts video sizes for mobile and desktop.
2. Embed Plus for YouTube: Provides customization options like aspect ratio and player controls.

How to Use ARVE:

1. Install and activate the plugin.
2. Go to Settings > ARVE.
3. Set the default width and height for your videos.
4. Embed videos usually, and the plugin will apply your settings.

Step 4: Make Videos Responsive

With today’s wide range of devices, making your videos responsive to look great on any screen size is essential.

Using CSS to Make Videos Responsive

1. Add this CSS code to your theme:

.responsive-video {

    position: relative;

    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */

    height: 0;

    overflow: hidden;

}

.responsive-video iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}

1. Wrap your iframe code with a <div> tag:

<div class=”responsive-video”>

  <iframe src=”https://www.youtube.com/embed/VIDEO_ID” frameborder=”0″ allowfullscreen></iframe>

</div>

This CSS ensures your video resizes proportionally on any device.

Step 5: Test Your Changes

After resizing your video, always test how it looks on different devices. Use the following steps:

1. Preview Your Page: Check how the video looks on your desktop.
2. Test on Mobile: Use your phone or a responsive design tester to ensure it fits smaller screens.
3. Check Loading Times: Ensure resizing hasn’t slowed down your page.

Final Thoughts

Inspect the embed code and make changes to resize the YouTube video. You can use any size you want in WordPress posts and pages.