How to Add Embed Video in WordPress?

Embedding videos from external platforms like YouTube or Vimeo into your WordPress site is an effective way to enhance content and engage your audience without impacting your site’s storage and bandwidth. This process, which involves incorporating content hosted elsewhere into your web pages or blog posts, differs significantly from uploading clips directly to your site. 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 guide you through this  crucial skill for enriching your site with informative or dynamic content.

How to Prepare to Embed YouTube Video in WordPress

Before embedding a clip in your WordPress site, it’s essential to prepare it for an optimal user experience:

• Choose a Video Hosting Platform: Consider platforms like YouTube for reach and engagement or Vimeo for privacy and a professional, ad-free environment. Select based on your specific needs.
• Ensure WordPress Compatibility: WordPress supports embedding from various platforms, including YouTube, Vimeo, DailyMotion, and TED, with an auto-embed feature for easy integration.
• Optimize the Content:
  • Quality: High-quality clips optimized for web streaming are ideal.
  • Length: Aim for concise videos, ideally 2-5 minutes, to maintain viewer engagement.
  • Descriptive Titles and Tags: Use clear titles and tags for better SEO and accessibility.
  • Thumbnail: Select an appealing thumbnail that accurately represents the content.

Properly preparing your clip enhances the embedding process and viewing experience on your WordPress site, helping to effectively engage your audience.

Method 1: Embedding Videos Using the Auto-Embed Feature

WordPress’s auto-embed feature is a user-friendly way to embed clips from supported platforms. It simplifies the embedding process, requiring only the URL to be pasted into your content. Here’s how to use this feature:

How to Embed a YouTube Video in WordPress (Works with All Supported Platforms)

• Supported Platforms: WordPress automatically embeds clips from many popular platforms, including YouTube, Vimeo, DailyMotion, and TED. For a full list of supported platforms, you can refer to the WordPress Codex.
• Ease of Use: The auto-embed feature is designed to recognize URLs from these platforms and automatically convert them into embedded videos in your posts or pages.

Step-by-Step Instructions on Embedding with a Simple URL Paste

• 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 WordPress Editor:
  • Open the post or page where you want to embed the element in your WordPress dashboard.
  • In the WordPress blocks editor, paste the copied URL directly into 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 piece.
• Adjusting the Embed:
  • Once embedded, you can click on the clip to see additional 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 appear to your visitors.
  • If everything looks good, publish or update your content.

Using the auto-embed feature is the quickest and most straightforward method to embed video WordPress. It’s highly effective for users who want to integrate content seamlessly without dealing with embed codes or additional settings. This method ensures that videos are responsively embedded, making them viewable across different devices and screen sizes.

Recommended: How to Add Widgets to WordPress?

Method 2: Using the Video Block in the Gutenberg Editor

For those who prefer more control over the embedding process, the Gutenberg editor in WP offers a dedicated ‘Video’ block. This block allows you to embed a video in WordPress with additional customization options. Here’s how to use it:

Navigating the Gutenberg Editor to Add a Video Block

• Open the Editor: Go to the post or page where you want to embed the piece. Open it in the Gutenberg editor.
• Adding the Block:
  • Click on 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 needed block in the block library and click on it to add it to your content.
• Embedding the Video:
  • Once the block is added, you have multiple options to embed your video:
    • Upload: Directly upload a file from your computer.
    • 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.

Customizing Video Settings Within the Block

• Block Toolbar Options:
  • The block toolbar, which appears at the top when the block is selected, provides basic options like alignment, aspect ratio, and more.
• Block Sidebar Settings:
  • For more detailed 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. Additionally, you can add a poster image to display before the video plays.
• Applying and Previewing Changes:
  • As you adjust settings, the changes will be reflected in the editor in real time.
  • Use the ‘Preview’ button to see how the clip will appear on the front end of your site.
• Publishing or Updating Your Content:
  • Once you are satisfied 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 ideal for users who want to embed files with specific settings or prefer to use clips stored in their media library. This method offers a balance between ease of use and customization, making it a versatile option for embedding videos in WordPress.

Method 3: Inserting a YouTube Embed into Gutenberg Editor in WordPress

To seamlessly integrate a YouTube video into your WordPress site using the Gutenberg Editor, follow these steps:

1. Selecting the Video on YouTube: Navigate to the YouTube video you wish to embed in your WordPress site.
2. Accessing the Share Option: Beneath the YouTube video, click on the ‘Share’ button.
3. Obtaining the Embed Code: From the share options, choose ‘Embed’. This action generates an embed code for the video.
4. Embedding 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 into this block.

By following these simple steps, you can effectively embed a YouTube video into your WordPress site using the Gutenberg Editor, enhancing your site’s content with engaging multimedia elements.

Method 4: Embedding Videos Using Shortcodes

Shortcodes in WordPress are small code snippets that allow you to perform specific functions or embed content, including videos, within your posts and pages easily. This method can be particularly useful for customizing the display of videos or embedding videos from sources that are not automatically supported by WordPress’s auto-embed feature.

Explanation of Shortcodes and How They Work for Clip Embedding

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

WordPress includes built-in shortcodes for embedding videos from certain platforms. Some hosting services and plugins also provide their own shortcodes for embedding items.

For Gutenberg Editor, there is a special widget called ‘Shortcode’. For Classic Editor, you can simply 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.

Using shortcodes for clip embedding offers 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 require specific configurations that are not available with the standard embed methods. It’s important to note that the availability and specific syntax of video shortcodes can vary depending on the plugins you have installed and the hosting service you’re using.

Method 5: Embedding Videos with a Plugin

For users seeking more functionality or ease of use beyond what’s available in the default WordPress editor, numerous plugins offer enhanced embedding capabilities. These plugins often provide additional features like video galleries, responsive design, and improved performance.

Overview of Popular Clip Embedding Plugins for WordPress

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

How to Install and Configure a Video Plugin

• Installing the Plugin:
  • In your WordPress dashboard, go to ‘Plugins’ > ‘Add New’.
  • Search for the video embedding plugin you want to use (e.g., “Envira Gallery”).
  • Click ‘Install Now’ and then ‘Activate’ once the installation is complete.
• Configuring the Plugin:
  • After activation, most plugins will add a new menu item to your WordPress dashboard. Navigate 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 that you can use 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.
• 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 ensure the video appears as expected.

Using a plugin for clip embedding in WordPress can greatly expand your options, especially if you frequently work with videos or need more advanced features. It’s a suitable method for users who want to incorporate content seamlessly while also benefiting from the additional functionalities these plugins offer.

Customizing Embedded Videos

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

Adjusting Size and Aspect Ratio

• Through the Block Editor:
  • If you’ve 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 within your child theme’s stylesheet.
• Example CSS:
• css
• Copy code

.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 offer settings 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 include sound.
• Plugin Settings:
  • If you’re using a plugin, check its settings for additional playback options. These plugins often offer more extensive 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:
  • html
  • Copy code

<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 seamlessly with your content, ensuring they complement rather than distract from your overall message. Remember to always consider the impact on user experience and accessibility when setting autoplay or other playback features.

Best Practices for Clip Embedding

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

• Responsive Design:
  • Use responsive video blocks or shortcodes that automatically adjust to different screen sizes.
  • Employ custom CSS for responsiveness, ensuring videos adapt to various devices.
  • Test the clip on multiple devices to guarantee a consistent viewing experience.
• Accessibility:
  • Include captions or subtitles for users with hearing impairments and provide transcripts when possible.
  • Add audio descriptions for the visually impaired to understand visual content.
  • Ensure video player controls are keyboard navigable and screen-reader friendly.
• Legal Considerations:
  • Confirm you have the right to use third-party videos, respecting copyright and licensing.
  • Avoid embedding private or restricted access videos.
  • Use official embedding methods provided by the hosting platform, like YouTube’s ‘Embed’ option.
  • Don’t alter the original embedded content, including branding and ads, without permission.

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

Conclusion

Embedding videos in WordPress is a powerful way to make your site more engaging and dynamic. WordPress provides various methods to embed videos, including the auto-embed feature, the Gutenberg editor’s video block, shortcodes, and plugins. When embedding, it’s crucial to consider factors like responsive design, accessibility, and copyright laws to ensure your content is accessible and compliant.