How to Embed Videos in WordPress

January 12, 2018 2:42 pm 0

Learn how to embed videos in WordPress. Newer WordPress versions allowed embedding of video files much easier. Simplicity of embedding videos into WordPress posts and pages are comparable with simplicity of adding images. It’s especially true if your video is hosted on one of popular video hosting sites, such as Youtube or Vimeo.

Embedding Youtube Video in WordPress

Basically, to embed videos in WordPress, it’s enough to paste Youtube video link into the post or page. WordPress will do remaining dirty work for you and you video will be shining on your site in seconds.

Make sure you are pasting a correct link from Youtube site. We will explain format of Youtube video links in more details.

After the Youtube url (https://www.youtube.com/) there’s word “watch” followed by letter “v”, question mark and equal sign. The remaining part of the link is unique identifier of your video on Youtube. If you don’t see the video after pasting link into the editor, your link is probably not in a valid format.

Embed Videos in WordPress

After you paste the link, you should see the video immediately in the editor window, as on the image above. If it’s not case, please check format of your link.

Embedding Vimeo Video in WordPress

Embedding videos from another popular video hosting service, Vimeo is also very straightforward. You should also just paste the link into the editor. However, make sure video link is in proper format. In this case, Vimeo site’s URL (https://vimeo.com/) is followed by numeric identifier of the video (in example 219122422).

When you paste the link, if it’s in proper format, you should see it immediately inside the editor.

Embedding Vimeo video in WordPress

Video as Background

There are many sites that use videos as background for promo text or call to action buttons. This method of including videos on your site is popular, but it’s not straightforward and require more advanced CSS skills. To make development of such website easier for you, we prepared WordPress video theme that includes video file as a background in the striking position of the home page.

Embed Locally Hosted Videos

In this case, you are embedding video that’s hosted on the same server where you WordPress site is hosted. Good side of this approach is that your video will be 100% ads free. This is not guaranteed on Youtube. On the other hand, Vimeo’s free accounts are limited in hosting space.

Downside of this approach is that some servers are not well optimized for video streaming. It’s almost impossible to achieve streaming quality of Youtube, Vimeo and other specialized video hosting providers. If your video has interruptions during playback, then you most likely have this problem. Your only hope is to contact hosting support and ask for help. If they are unable to resolve this, you would need to host your videos on specialized sites, such as Youtube or Vimeo.

Converting Video for Web

Your video must be optimized for web. If you are uploading, in example, 2 minutes of video and video file size is, in example, 1 GB, your video streaming will be interrupted, video loading time will be too long and overall user experience will be poor. So, you must optimize it first!

Accordingly to the latest web standards, your video should be available in 3 formats: mp4, ogv and webm. If your video is not too big, you can convert it online for free using this site https://www.online-convert.com/

Uploading Video Files

When you have your video in all 3 formats in place, it’s time to upload them. Click Add Media button, select all 3 files from your computer and wait for upload to complete. It will take more time if your Internet connection is slower. However, if you select them all at once, you will end up with 3 same videos on the post. This is not what you need. However, if you select only one video (in example mp4), some browsers and some devices will not be able to reproduce it.

Embed Videos in WordPress in Accordance to Web Standards

To prevent this and ensure proper playback of your video on as many devices as possible, we uploaded video in 3 different formats. But how to embed it on the page?

Firstly, get URLs of all 3 video files. You can do it if you open Media (or click Add Media button), click on the video and copy given URL.

Secondly, switch your editor to Text mode and paste this simple HTML code:
<video width="320" height="240" controls>
<source src="https://www.yoursite.com/wp-content/uploads/2018/01/movie.mp4" type="video/mp4">
<source src="https://www.yoursite.com/wp-content/uploads/2018/01/movie.ogg" type="video/ogg">
<source src="https://www.yoursite.com/wp-content/uploads/2018/01/movie.webm" type="video/webm">
Your browser does not support the video tag.
</video>

In the above code snippet, you should change src values for all 3 videos and change them with your video URLs. You can also change width and height parameters to match the size of your video.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.