In this lunchtime #WPQuickies, I look at how to best add video to your WordPress website.
Videos added to landing pages can increase conversion rates by 80%.
As the pace of society increases, demand for fast visual content increases.
What Is Embedding?
Before we get into adding videos to your WordPress website, let’s talk about a process called embedding.
Embedding is where you add a part of another website to a page on your website.
When adding video content to your website, you will mostly be embedding it from another website or service platform like YouTube, for example.
Embedding website content is usually done using an <iframe> HTML element.
Please note that <iframe> elements may interact with your website content depending on the properties given to them.
For example, here are some iframe properties and the actions they can perform:
- allow-same-origin
Allows the iframe to access cookies and local storage from the parent window as if it came from the same domain. - allow-top-navigation
Allows the iframe to navigate the parent to a different URL. - allow-forms
Allows form submission - allow-scripts
Allows JavaScript execution - allow-popups
Allows the iframe to open new windows or tabs - allow-pointer-lock
Allows pointer lock
The primary advantage of embedding a video is that you don’t have to store nor stream the video on your systems.
What Are the Bandwidth Data Implications of Embedding YouTube Videos in My Website?
Both the YouTube player and the video content are streamed from YouTube servers.
The only bandwidth your site uses is the few bytes it takes to add the video player embed code in your web pages.
This is the same for all the top video platforms.
WordPress Embed Block
WordPress has an embed block that automatically recognises many top video platforms, including DailyMotion, Ted, Vimeo, WordPress.tv, YouTube and others.
Facebook has closed their oEmbed embedding API, affecting Instagram, so you cannot embed Facebook or Instagram posts.
Embedding a YouTube Video Into WordPress
The first step is to get the URL for the video you want to embed.
You can embed a single YouTube video URL or a playlist. A playlist will have the playlist icon in the top right corner of the embedded video (see below).
For this YouTube video example, open a browser tab to the video you want to embed.
You can copy the URL from the browser window.
Or you can click on the Share button at the bottom right of the video window.
Clicking the share function will open up another popup window where you can copy the short format of the video URL using youtu.be.
You can click on the “Embed” icon from this same popup window and copy the <iframe> element.
There’s no need to copy the <iframe> embed code; WordPress will automatically create it when you paste the YouTube URL into the WordPress editor.
Right-hand click and paste the YouTube URL into the WordPress block editor.
WordPress will create an embed block and automatically create the required <iframe> code if you copy from a supported platform.
View the <iframe> code from the web page source code
This functionality also works in widgets for your theme’s headers, footers and sidebars.
Embedding a YouTube iframe Directly Into WordPress
If you need to copy the <iframe> code directly from YouTube into WordPress, copy the embed code from the share popup window.
Then select “Embed”.
Then copy the <iframe> code.
Navigate back to the WordPress block editor and choose an HTML block.
Paste the <iframe> code into this block, update your post and preview.
You will have to adjust the <iframe> width and height properties to match the width of your main content area or sidebar.
Adding Video to WordPress Using a Plugin
One of the top plugins for embedding YouTube videos into your WordPress posts and pages is “Feeds for YouTube Pro” by Smash Balloon.
https://smashballoon.com/youtube-feed
This plugin allows you to automatically embed all of your YouTube channel videos in customisable formats such as grid, carousel, gallery, list or custom.
It automatically imports new videos, combines feeds, adds live streaming, and lots more.
Visit their website to see all the different features and layouts available.
There is also a free version with limited functionality available from the WordPress.org plugin repository.
Using a plugin to add videos to your WordPress website will give you more features than using the core WordPress embed block.
Can I Play Videos From Amazon S3?
Yes, it’s easy to play videos from an Amazon S3 bucket as long as it is public access.
The video content is streamed directly from Amazon S3 servers; however, you pay for storage and data transfer fees.
If you are streaming a lot of video content from Amazon S3, the data fees can be considerable.
For example, streaming 100 videos of 500Mb each (5Tb) per month will cost between USD 450 and USD 500 (ref: https://stackoverflow.com/questions/53276420/how-much-it-cost-to-use-amazon-s3-for-video-streaming-backend ).
Can I Upload Videos to WordPress Directly?
You can! ????
But, you should not! ????
Videos take up a lot of disk space. Videos also use a lot of bandwidth when being played.
It’s best practice to use a video service like YouTube, Vimeo or Adilo.
YouTube is free but displays advertisements before, during and after your video, which can seem unprofessional.
Vimeo and Adilo are paid video platforms and do not display advertisements during playback.
You also have more options with paid video platforms, such as the ability to restrict playback to one or more domain names, stopping others from stealing and embedding your video content.
Summary
WordPress makes embedding videos from major video platforms quickly.
You can always copy the <iframe> code directly from any platform into a WordPress HTML block if WordPress does not support that platform.
Plugins will give more feature-rich functionality than the native WordPress embed block.
Avoid uploading video files directly to WordPress, instead use a video streaming platform like YouTube, Vimeo or Adilo.
#WPQuickies
Join me every Thursday at 1 pm Sydney time for some more WPQuickies – WordPress tips and tricks in thirty minutes or less.
Broadcasting live on YouTube and Facebook.
Suggest a #WPQuickies Topic
If you have a WordPress topic you’d like to see explained in 30 mins or under, fill out the form below.
https://forms.gle/mMWCNd3L2cyDFBA57
Watch Previous WPQuickies
