Important!

Please note that our Legacy Themes have been replaced by new Thrive Theme Builder Themes. While our Legacy Themes are still functional, we are no longer actively developing them. Check out this course to find out how to switch your site to Thrive Theme Builder.

This article about how to use the "Video" element might come in handy for when you want to insert a video into a post or page.

The responsive video shortcode can be used to add YouTube videos, Vimeo videos, and self-hosted videos to your content.

It's different from the default video embed methods provided by YouTube and Vimeo in that videos added with the shortcode will be responsive and re-size to fit the dimensions of different screen sizes.

To insert a video, go to the default WordPress post or page editor, click on the Thrive Themes Short Codes button and select "Responsive Video" from the drop-down menu:

short-code-responsive-video-1

There are three embed choices:

YouTube Options

short-code-responsive-video-2

1) Video Choice

Select the "YouTube" radio option.

2) Video URL

Go to YouTube and find the video you want to embed in your post. Copy the URL of the video and paste it (including the http:// part) into the Video URL field. Note that you need to paste the URL of the video, not the embed code of the video.

3) Video Customization

As an added bonus, you can also customize the way your embedded YouTube video will appear. You can prevent related videos from showing at the end of the video (and potentially distracting your visitors), hide the YouTube logo and video title, and set the video to autoplay as soon as the page loads, by ticking the corresponding options.

Finally, click on the "Insert" button to add the complete shortcode to your content.

Vimeo Options

Choose the "Vimeo" option at the top (1) and paste the URL of the Vimeo video you want to embed in the "Video URL" field (2).

Just like with YouTube embeds, it's important that you add the full URL of the video (including the "http://" part) in the field and not the embed code provided by Vimeo:

short-code-responsive-video-3

When you've added the URL, click on the "Insert" button to add the complete shortcode to your content.

Custom Options

To add a self-hosted video, choose the "Custom" option at the top (1). Paste the URL of your video file in the "Video Custom URL" field (2):

short-code-responsive-video-4

This is the URL that points to wherever the video file itself is hosted. Supported video file formats are:

  • .mp4
  • .webm
  • .flv
  • .mov
  • .wmv
  • .ogv

You can theoretically upload video files directly to your WordPress site (using the WP media manager) and get the links to create the responsive custom video shortcode from there.

It's not the best practice to host your videos on the same server as your website.

Videos and websites have very different hosting and bandwidth requirements, so they should be served from separate locations.

Self-hosting videos are generally not recommended unless you really know what you're doing. If you want to learn about online video in more detail, here's a recommended article on the topic.

Important!

Please note that in order to use the Shortcodes as they are described in this article, you have to install the "Classic Editor" plugin. Check out this article to find out more about how to install and use the plugin.

Did this answer your question?