How to Embed Videos in WordPress

In this post, we covers how to embed videos in WordPress blog posts and pages. We should get started by stating that embedding videos into your WordPress pages and posts is relatively easy. It also offers a great way to make your content more engaging. This post is to help with embedding videos from Vimeo, YouTube, etc., to your WordPress site or blog.

 

Read more WordPress tutorials:

How to Fix 404 Errors in WordPress After Changing Permalinks

The Many Uses to Which You Can Put Your WordPress Website

Top 5 Security Issues with WordPress and How to Fix Them

WP Rocket WordPress optimization tutorial

What you should know about optimizing your WordPress website for speed

WordPress Search Engine Optimization Tutorial

WordPress Security Plugins

WordPress Website Speed Optimization Tutorial

WordPress image optimization tutorial

How to Fix a Hacked WordPress Website

How to Fix the ERR_CONNECTION_TIMED_OUT Error in WordPress

How to Improve the Security of your WordPress Website

WP Rocket WordPress optimization tutorial

How to Fix WordPress Login Page Refreshing & Redirecting

How to create table of contents in WordPress posts

 

In this post, you will find:

 

Why Not Upload Videos to the Hosting Server?

Many people think: "Why not upload video files right on my hosting account, instead of going through the trouble of embedding them from video hosting platforms?" Uploading your videos will take up the server’s resources. Just because you can do it, doesn’t mean you should. Video files are often large, and if you upload them directly to your hosting server, the result would be a quick drain of your monthly bandwidth.

Our web hosting services have unmetered bandwidth - meaning we will not charge you according to the amount of bandwidth you have generated. However, you should be aware that bandwidth is not an infinite resource and we constantly monitor our shared servers for excessive use. We do this to ensure the optimal performance for our customers. Unlike images, an HD video could easily be more than 100 MB. Imagine what would happen when hundreds of visitors view (download) this particular video file. Your bandwidth would go through the roof, which is precisely why embedding videos from YouTube, Vimeo, Wistia, or similar as hosts for your video materials. This way, you would get the best hosting experience and the most optimal monthly bandwidth usage.

 

Embedding with oEmbed

WordPress has been an oEmbed consumer for some time now, which allows users to embed content from other sites with ease. Starting with WordPress 4.4, all WordPress users and developers get to work with oEmbed, which also allows any oEmbed consumer to embed posts from any WordPress site.

To achieve this, the oEmbed consumer code of WordPress has been enhanced to work with all sites that provide oEmbed data (as long as the data matches some strict security rules). For security, embeds will appear within a sandboxed iframe – a template that we can style or replace entirely by the theme on the provider site.

The oEmbed feature means that all posts will now be available for embedding. In case we are using pretty permalinks, the embeddable content will be available at example.com/your-post/embed/. Embedding media into WordPress posts and pages has never been easier mainly because of the addition of oEmbed, which allows us to bring content like videos, images, tweets, audio and more from a different site into our own.

The steps for embedding posts with oEmbed are relatively straightforward.

 

Read more WordPress tutorials:

How to control new user registration in WordPress

How to create a simple portfolio website with WordPress

How to create and manage a page in WordPress

How to enable SSL on your WordPress website and move from http to https

How to enable and disable pingbacks and trackbacks in WordPress

How to safely disable the WordPress automatic update feature

How to update your WordPress installation

 

Embed Videos in WordPress Using the Old Classic Editor

Let’s say we are still using the WordPress classic editor, and then we can embed the videos in the following way:

  • We copy the URL from a video hosting service like YouTube or Vimeo. Then we paste it in the editor;
  • If using the visual editor, we would see a preview of the particular video;

However, we won’t be able to use the width adjustment and other options that we could use in the new WordPress Gutenberg block editor. However, we can use the Code View to make the desired adjustments.

 

Embed Videos in Gutenberg Block Editor

It’s even easier to embed Youtube and Vimeo videos in Gutenberg than it was with the classic WordPress editor. Embed Blocks allow us to add content from other sites (videos from video hosting platforms like YouTube, Vimeo, and Dailymotion; tweets from Twitter; events from Facebook, etc.) into our pages.

Easy steps to follow:

  • We hover the mouse over the icon that says “Add Block” (upper left corner withing Gutenberg)
  • We scroll to Embeds - under that section, we can see different embed formats that we can add to our page.
  • Depending on the type of embed we have selected, we would be prompted to add a link of the content that we want to embed.
  • Once we added the link and click on Embed, we can see a display of our embed content. We then save and publish our page after being finished:

 

Read more WordPress tutorials:

How to modify search features of your WordPress website

7 Security Tips for a WordPress Website

Basic Guide to WordPress Security

Configuring the basic settings in your WordPress website

How to Backup Your WordPress Website Automaticaly Using Backup Plugins

How to Backup and Restore the backup of a WordPress Website

How to Create Redirects in WordPress

 

Embed Videos via Shortcode

Since Version 2.5 WordPress supports the so-called Shortcodes. They are introduced for creating macros that can be used in a post's content. The shortcode for embedding is primarily used when we need to style our embedded content. Here’s an example of the Shortcode for embedding:

[embed width="560" height="380"]http://www.youtube.com/watch?v=dQw4wxDtghrWsg9WgXcQ[/embed]

As mentioned before, this is a method for personal editing, therefore the manual input of width and height parameters.

 

Embed Videos in the Sidebar

Sometimes, we would prefer adding our videos to our sidebar, rather than inserting it in our post. Let’s go through the steps to embed a video in WordPress sidebar:

  • From the Admin Dashboard, the path we need to follow here is Appearance ? Customize ? Widgets:
  • In case there are multiple sidebar areas where we need the video added, we choose the specific sidebar and then click the Add a Widget button:
  • We type “video” in the search box:
  • After having the video widget on our left side, we click Add Video button and choose Insert from URL:
  • Then, we copy and paste the video URL in the box;
  • Next, we may add a video title in the widget on our left side;
  • Finally, we click the Save & Publish button to go live.

We have to note that WordPress supports auto-embeds for a lot more platforms than Vimeo and YouTube. We can also embed Facebook posts and tweets in our WordPress.

 

Further reading:

How to Fix 404 Errors in WordPress After Changing Permalinks

The Many Uses to Which You Can Put Your WordPress Website

Top 5 Security Issues with WordPress and How to Fix Them

WP Rocket WordPress optimization tutorial

What you should know about optimizing your WordPress website for speed

WordPress Search Engine Optimization Tutorial

WordPress Security Plugins

WordPress Website Speed Optimization Tutorial

WordPress image optimization tutorial

How to Fix a Hacked WordPress Website

How to Fix the ERR_CONNECTION_TIMED_OUT Error in WordPress

How to Improve the Security of your WordPress Website

 

Some Functions and Hooks for Developers

Developers need to make sure they do not add an embed rewrite endpoint. Here are the most useful embedding related functions:

  • get_post_embed_url() — Retrieves the URL in order to embed a specific post in an iframe, e.g. https://example.com/embed/
  • get_post_embed_html() — Retrieves the entire embed code for a specific post.
  • get_oembed_endpoint_url() — Retrieves the oEmbed endpoint URL for a particular permalink, e.g. https://example.com/core/?oembed=true&url=<url>. This is used to add the oEmbed discovery links to the HTML <head> for single posts.
  • get_oembed_response_data() — Retrieves the oEmbed response data for a particular post, according to the oEmbed specification.

Of course, the return values of the functions above are all filterable, which makes it easy for us to customize the new feature.

Conclusion

Not only is it better for your resources, but embedding is also great for better user experience. Video hosting platforms are optimized to choose the right resolution for your visitors. They do that by identifying their device’s quality and their network connection. Uploading your video file to top video hosting platforms like YouTube would encourage people to share it. This can result in more visitors on your WordPress site (free marketing for you)

  • 0 Users Found This Useful
Was this answer helpful?

Related Articles

How to Keep Your WordPress Website Updated

Updating your WordPress website is good for its security, content and data integrity and also for...

How to Install and Setup Your Premium WordPress Theme

WordPress is an excellent web development tool and still remains the most popular content...

How to create and manage a page in WordPress

Creating pages in WordPressCreating individual pages in WordPress is quite similar to writing a...

WordPress Search Engine Optimization Tutorial

Wikipedia defines Search engine optimization (SEO) as the process of affecting the online...

How to Secure a WordPress Website

How to Secure WordPress with Unique Admin UsernameMost applications use "admin" as username and...