How to Add Embed Video in WordPress?

Embedding videos from external platforms like YouTube or Vimeo to your WordPress website is a great way to add content and engage your audience without using up your site’s storage and bandwidth.

This process of incorporating content from elsewhere into your web pages or blog posts is different from uploading to your site directly. Embedding keeps site performance optimal as videos are streamed from an external host.

So, how to embed video in WordPress? In this article, we will show you how to do this essential skill to add informative or dynamic content to your site.

Preparing Your Videos for Embedding

Before you can embed your video content in WordPress, you need to prepare it first. Here’s how:

• Choose the Right Video Format: Make sure your video is in a format that can be embedded in WordPress, like MP4, WebM, or OGV. These formats are widely supported and have good quality with compression.
• Optimize Your Video for Web: Compress your video to a suitable size and resolution for fast loading and smooth playback. Tools like HandBrake can help you optimize your video files without sacrificing quality.
• Add Captions and Subtitles: Adding captions and subtitles makes your video more accessible to a wider audience, including those with hearing impairments. It also improves user engagement and can benefit your SEO.
• Create a Thumbnail: A nice thumbnail that represents your video content can entice users to click and watch. Make sure your thumbnail is clear, high quality, and relevant to the video topic.

Preparing your videos properly ensures they are ready for embedding and gives the best experience to your viewers.

How to Prepare to Embed YouTube Content in WordPress

Before you embed YouTube content in your WordPress website, make sure to prepare it for optimal user experience:

• Choose a Video Hosting Platform: Consider platforms like YouTube for reach and engagement or Vimeo for privacy and ad-free environment. Choose based on your needs.
• Ensure WordPress Compatibility: WordPress supports embedding from various platforms like YouTube, Vimeo, Dailymotion, and TED with an auto insert feature for easy integration.
• Optimize the Content:
• Quality: High-quality video optimized for web streaming is ideal.
• Length: Aim for short videos, 2-5 minutes, to keep viewers engaged.
• Descriptive Titles and Tags: Use descriptive titles and tags for better SEO and accessibility.
• Thumbnail: Choose a nice thumbnail that represents the content.

Preparing your clip properly makes the embedding process and viewing on your WordPress website smooth and engaging to your audience.

How to Embed Video in WordPress Blog Post?

Method 1: Embedding Videos Using Auto-Insert Feature

WordPress’s auto-insert feature is a easy way to add video embeds from supported platforms. It simplifies the process, all you need to do is paste the URL in your content. Here’s how:

How to Embed a YouTube Video in WordPress (Works for all supported platforms)

• Supported Platforms: WordPress embeds from many popular platforms including YouTube, Vimeo, DailyMotion and TED. For full list of supported platforms check the WordPress Codex.
• Ease of Use: The auto-insert feature recognizes URLs from these platforms and converts them into embedded video in your posts or pages.

Step-by-Step Instructions to Embed with a Simple URL Paste

If everything looks good, publish or update your content.

Using auto-embed is the fastest and easiest way to embed video in WordPress. It’s perfect for users who want to add content seamlessly without dealing with embed codes or extra settings. This method ensures videos are responsive, so they are viewable across different devices and screen sizes.

• Copy the URL:
  • Go to the video on the hosting platform (e.g., YouTube, Vimeo).
  • Copy the URL from your browser’s address bar or use the ‘Share’ feature on the clip hosting site to get the shareable link.
• Paste the URL in WP Editor:
  • Open the post or page where you want to add the element in your WordPress dashboard.
  • In the WordPress blocks editor, paste the copied URL in the content area. You can do this in a new paragraph block or a dedicated ‘Video’ block.
  • WordPress will automatically recognize the URL and convert it into an embedded video.
• Adjust the Embed:
  • Once embedded, you can click on the video to see more options in the block toolbar, such as alignment.
  • You can also find more settings in the block sidebar, such as aspect ratio or playback controls, depending on the block.
• Preview and Publish:
  • Preview your post or page to see how the video will look to your visitors.

Recommended: How to Add Widgets to WordPress?

Method 2: Using the Video Block in Gutenberg Editor

For those who want more control over the embedding process, the Gutenberg editor in WP has a dedicated ‘Video’ block. This block allows you to embed a video in WordPress with extra options. Here’s how:

Go to the Gutenberg Editor to Add a Video Block

• Open the Editor: Go to the post or page where you want to add the piece. Open it in the Gutenberg editor.
• Add the Block: Click the ‘+’ (Add Block) button at the top of the editor or in the content area where you want to add the piece. Search for the block in the block library and click on it to add it to your content.
• Embed the Video: Once the block is added, you have multiple options to embed your video:
  • Upload: Directly upload a file from your computer. Be cautious when you upload videos directly to your hosting account as it can affect site performance.
  • Media Library: Select a clip from your WordPress media library.
  • Insert from URL: Paste the URL if it’s hosted on a supported platform like YouTube or Vimeo. Embedding videos from these platforms can increase user engagement and leverage traffic from major video hosting sites.

Customize Video Settings in the Block

• Block Toolbar Options: The block toolbar, which appears at the top when the block is selected, has basic options like alignment, aspect ratio, and more.
• Block Sidebar Settings: For more settings, click on the block and then the settings icon (gear symbol) to open the block settings sidebar. Here, you can adjust various settings like autoplay, loop, mute, and playback controls. You can also add a poster image to display before the video plays. You can also manage how the video file is handled, including preload options to optimize load speed when multiple video files are present.
• Apply and Preview Changes: As you change settings, the changes will be reflected in the editor in real time. Click the ‘Preview’ button to see how the clip will look on the front end of your site.
• Publish or Update Your Content: Once you are happy with the settings and placement, publish or update your post or page to make the changes live.

Using the video block in the Gutenberg editor is perfect for users who want to embed files with specific settings or who have clips stored in their content library. This method offers a balance of ease of use and customization, making it a versatile option for embedding videos in WordPress.

Method 3: Inserting YouTube Embed into Gutenberg Editor in WordPress

To embed a YouTube video in your WordPress site using the Gutenberg Editor, follow these steps:

1. Select the Video on YouTube: Go to the YouTube video you want to embed in your WordPress site.
2. Access the Share Option: Beneath the YouTube video, click on the ‘Share’ button.
3. Get the Embed Code: From the share options, choose ‘Embed’. This will generate an embed code for the video.
4. Embed in Gutenberg Editor: Copy the generated embed code. In your WordPress site’s Gutenberg Editor, open the HTML block where you want the video to appear. Paste the embed code in this block.

By following these simple steps, you can embed a YouTube video in your WordPress site using the Gutenberg Editor and add multimedia to your content.

Method 4: Embedding Videos with Shortcodes

Shortcodes in WordPress are small code snippets that allow you to perform specific functions or embed content, including videos, in your posts and pages easily.

This method can be useful for customizing the display of videos or embedding videos from sources not supported by WordPress’s auto-embed feature.

What are Shortcodes?

Shortcodes are simple, bracketed tags ([shortcode]) that you can insert in your posts and pages. When your site is viewed, these shortcodes are replaced with the corresponding content or functionality.

WordPress has built-in shortcodes for embedding videos from certain platforms. Some hosting services and plug-ins also have their own shortcodes for embedding items.

For Gutenberg Editor, there is a special widget called ‘Shortcode’. For Classic Editor, you can insert it directly into the content.

Examples of Shortcode Usage for Different Content Sources

• WordPress Built-In Video Shortcode:
  • You can use the shortcode to embed files hosted on your site or externally.
  • Example usage: [ video src=”video-source.mp4″ ]
  • You can also specify attributes like width, height, poster, loop, and autoplay within the shortcode.
• YouTube Video Shortcode:
  • If you’re using a plugin that provides a shortcode for YouTube, it might look something like this: [youtube id=”VideoID”]
  • Replace “VideoID” with the actual ID of the YouTube video.
• Vimeo Video Shortcode:
  • Similar to YouTube, some plugins offer shortcodes for embedding Vimeo videos.
  • Example usage might be: [vimeo id=”VideoID”]
• Custom Plugin Shortcodes:
  • Many video-related plugins offer their own set of shortcodes with additional functionalities.
  • Always check the documentation of the specific plugin for the correct usage and available attributes.

Shortcodes for clip embedding is a flexible and often customizable approach. It’s a good method if you need to embed videos in a way that’s not supported by the default WordPress editor or if you need specific configurations that’s not available with the standard embed methods.

Note that the availability and specific syntax of video shortcodes may vary depending on the plugins you have installed and the hosting service you’re using.

Method 5: Embedding Videos with a Plugin

For users who want more functionality or ease of use beyond what’s available in the default WordPress editor, there are many plugins that offer enhanced embedding capabilities. These plugins often have additional features like video galleries, responsive design, and improved performance.

Popular Clip Embedding Plugins for WordPress

• Video Embed & Thumbnail Generator: This plugin has various video embedding and thumbnail options, making it easy to manage content.
• Envira Gallery: Known for its photo gallery features, Envira Gallery also has robust video support, allowing you to create beautiful video galleries.
• YouTube Embed Plus: As the name suggests, this plugin is specifically for YouTube videos. It has features like automatic video thumbnails, video playlists, and responsive design.
• Vimeo Master: For Vimeo enthusiasts, this plugin allows easy embedding of Vimeo videos with extra customizations.
• WP Video Lightbox: This plugin allows embedding items in a lightbox overlay, which can be a nice way to present content.

How to Install and Configure a Video Plugin

Install the Plugin:

• Go to your WordPress dashboard, Plugins > Add New.
• Search for the video embedding plugin you want to use (e.g., “Envira Gallery”).
• Click Install Now and then Activate once installed.

Configuring the Plugin:

• After activation, most plugins will add a new menu item to your WordPress dashboard. Go to this section to configure the plugin settings.
• Depending on the plugin, you may have options to set default video sizes, choose player designs, create galleries, and more.

Embedding Items:

• Many plugins provide shortcodes or Gutenberg blocks to embed videos in your posts and pages.
• In the post or page editor, either enter the provided shortcode or add the specific video block to your content and configure it as needed.
• You can also use the video widget to embed videos in areas like the sidebar or footer. This widget is customizable and integrates with the WordPress dashboard.

Customizing and Previewing:

• Customize your settings using the plugin’s interface. This might include adjusting the layout, adding a thumbnail, or setting autoplay options.
• Preview the post or page to make sure the video appears as expected.

Using a plugin for clip embedding in WordPress can be very useful, especially if you work with videos often or need more features. It’s a good method for users who want to incorporate content seamlessly and also get the extra features these plugins offer.

Method 6: Using the Iframe Method

The Iframe method is a popular way to embed videos in WordPress, offering customization options for the video’s appearance and behavior. Here’s how to use the Iframe method:

• Get the Iframe Code: Go to your video on the hosting platform (e.g., YouTube or Vimeo). Click on the Share button and select Embed to get the Iframe code.
• Paste the Code into Your WordPress Site: Copy the Iframe code and paste it into your WordPress site. You can do this in a post or page by switching to the HTML view in the editor or by using a custom HTML block in the Gutenberg editor. You can also add it to a widget area if needed.
• Customize the Code: You can customize the Iframe code as needed. For example, you can change the width and height of the video, add a border or disable player controls. Modify the Iframe attributes in the code to achieve the desired look and functionality.

Using the Iframe method gives you more control over how your embedded videos appear on your WordPress site.

Customizing Embedded Videos

Once you’ve embedded a video in your WordPress site, you might want to customize its appearance and playback behavior to fit your content and audience engagement strategy. Here are ways to adjust video size, aspect ratio, and other playback options:

Size and Aspect Ratio

Through the Block Editor:

• If you embedded the clip using a Gutenberg block, select the video block in your editor.
• In the block settings sidebar, look for options to adjust the width and height of the element. Some blocks also offer pre-set aspect ratio options.

Using Custom CSS:

• For more control, you can use custom CSS to set specific dimensions or aspect ratios. Add the CSS code to your theme’s customizer under ‘Additional CSS’ or in your child theme’s stylesheet.

.your-video-class {

 width: 100%;

 height: auto;

 aspect-ratio: 16 / 9;

}

• Replace .your-video-class with the actual class or ID of your video element.

Autoplay, Looping, and Other Playback Options

Autoplay and Looping:

• Many video blocks and shortcodes have options for autoplay and looping. Look for these options in the block’s toolbar or settings sidebar.
• For autoplay, be mindful of user experience and accessibility guidelines. Autoplaying videos can be intrusive, especially if they have sound.

Plugin Settings:

• If you’re using a plugin, check its settings for more playback options. These plugins often have more customization, including autoplay, looping, mute options, and more.

Embedding with HTML:

• If you’re comfortable with HTML, you can manually add autoplay, loop, and muted attributes to your clip embed code.
  • Example HTML:

<video autoplay loop muted>

 <source src=”your-video.mp4″ type=”video/mp4″>

</video>

Responsiveness:

• Ensure your clip is responsive, meaning it adjusts size based on the viewer’s screen. Most modern WordPress themes and video blocks handle this automatically, but it’s always good to check.

Customizing your embedded videos can greatly improve the viewing experience and engagement on your site.

Adjusting size, aspect ratio, and playback settings allows your videos to blend in with your content rather than distract from your overall message. Remember to always consider user experience and accessibility when setting autoplay or other playback features.

Best Practices for Clip Embedding

Embedding in WordPress requires consideration for responsive design, accessibility, and legal compliance:

Responsive Design:

• Use responsive video blocks or shortcodes that auto-adjust to different screen sizes.
• Use custom CSS for responsiveness so that videos adapt to various devices.
• Test the clip on multiple devices to ensure a consistent viewing experience.

Accessibility:

• Include captions or subtitles for users with hearing impairment and provide transcripts when possible.
• Add audio descriptions for the visually impaired to understand visual content.
• Make video player controls keyboard navigable and screen-reader friendly.

Legal:

• Confirm you have the right to use third-party videos, respecting copyright and licensing.
• Don’t embed private or restricted access videos.
• Use the official embedding method provided by the hosting platform, like YouTube’s ‘Embed’ option.
• Don’t modify the original embedded content, including branding and ads, without permission.

By following these practices, you can make your content engaging, accessible, and legally compliant and provide a positive and inclusive experience for your audience.

Troubleshooting Common Issues

When embedding videos in WordPress, you may encounter some common issues. Here are some troubleshooting tips to help you resolve them:

• Video Not Playing: Make sure the video URL is correct and the video is publicly accessible. Check if there are any restrictions set by the video hosting platform that might prevent playback.
• Video Not Showing: Check if the video is in a format that can be embedded in WordPress. Make sure the Iframe code or embed URL is in the correct spot in the editor.
• Video Not Loading: Large video files or server overload can cause videos not to load. Optimize your video files for web use and consider using a CDN to distribute the load.

By fixing these common issues, you can ensure your embedded videos work and provide a smooth user experience.

Conclusion

Embedding videos in a WordPress site is a great way to make your site more interesting and interactive. WordPress has several ways to embed videos, including auto-embed, video block in the Gutenberg editor, shortcodes, and plugins. When embedding, make sure you consider responsive design, accessibility, and copyright laws so your content is accessible and compliant.