Updated on Aug 16, 2019
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.
In this post, you will find:
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 FastCloud 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. We have a thorough Tutorial on Bandwidth - feel free to check it.
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.
Let’s say we are still using the WordPress classic editor, and then we can embed the videos in the following way:
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.
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:
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.
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:
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.
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.
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).
We hope you find this article useful. Discover more about FastCloud - the top-rated Hosting Solutions for personal and small business websites in four consecutive years by the HostAdvice Community!