Using the Video Element in Thrive Architect

This article will show you how to add a video to your page using Thrive Architect.

Add the Video Element

In your Thrive Architect editor, click on the plus sign from the right sidebar. This is where you can add a new element from:

Look for the “Video” element or search for it in the search bar. Drag and drop it on your page wherever you desire:

You will now notice that you have all the available options that you can apply to the video on the left sidebar:

Use the Main Options

Under the “Main Options” section of the left sidebar, you will be able to find some ways to quickly customize your “Video” element.

Once you insert the “Video” element to your editor, you will see that, under the “Main Options” section, the first thing that you can change is the “Source” of the video.

Note: If you have previously set up a “Video” type of custom field, using the “Advanced Custom Fields” plugin, and you have also assigned a value for that custom field for the page you are working on now, then the first option will not be the “Source” one. Instead of the “Source” option, you will see the “Element Type” options. These are the “Static” and “Dynamic” options.

The “Static” option is selected by default here. If you do not want to use the custom field you have set up, then you can leave this option selected and proceed with adding a video using one of the “Source” options, as described below.

However, if you want to use the custom field you have previously set up, then you should click on the “Dynamic” option. If you select this option, you will be able to use the video that you have assigned as the value of the custom “Video” field:

If you need more information about this, make sure to check out this article, which provides more in-depth details about setting up a “Video” type of custom field for a “Video” element.

Keep in mind that the “Element Type” section will be available only if you have followed the steps presented here, in order to set up the custom fields.

There are a few available video platforms that you can choose from when using the “Source” option, or you can upload the video from your PC. To select a source, click on the field next to the “Source” option:

From the small drop-down menu that opens, simply click on the source that you want to use:

Here are the sources that you can choose from and how you can customize them:

YouTube

URL Field

If the video you want to use is from YouTube, go ahead and select this platform. Next, copy the URL of the video, paste it into the URL field, and then press “Enter”, or simply click outside the URL field to add the video to the page:

Video Start Time

You can use this option if you want to make your video start at a certain time. In order to do that, either write the values (numbers) for the minutes/seconds inside the respective fields or use the up/down arrows to choose the start time:

Video Style

You can choose a certain video style from the styles list. Open the list by clicking on the field:

The “Video Style” list will open. If you want to see how a style looks like, click on it and you will be able to preview it in the editor. Once you choose the one you prefer, click on the “Apply” button:

Vimeo

If you wish to upload a video from Vimeo, go to the “Source” section and change the source to Vimeo.

URL Field

In the URL field, paste the URL of the Vimeo video that you want to add to your page, and then press “Enter” or click anywhere outside the field:

Player Color

By default, there is no player color selected. In order to choose one, click on the color box:

This will open the color pop-up, where you can choose the color you prefer. You can manually pick the color or you can enter the HEX/RGB code:

After you pick the color, click on “Apply”:

Video Style

In order to choose a video style, click on the field next to the option:

The “Video Style” list will open. If you want to see how a style looks like, click on it and you will be able to preview it in the editor. Once you choose the one you prefer, click on the “Apply” button:

Wistia

If the video you want to insert into your page comes from Wistia, make sure to go to the “Source” section and select “Wistia”.

URL Field

This is where you can insert the Wistia URL, and then press “Enter”, or click anywhere outside the field:

Player Color

Next, you can choose a player color. By default, there is no player color selected. In order to choose one, click on the color box. Choosing a color can be done using a color picker, or by entering a HEX/RGB color code, just as described above.

Video Start Time

You can use this option if you want to make your video start at a certain time. In order to do that, either write the values for the minutes/seconds inside the respective fields or use the up/down arrows to choose the start time:

Video Style

In order to open the “Video Style” list, click on the field next to this option:

Then, scroll down the list and choose the one you prefer. If you are not sure how a style looks like, simply click on it to preview it in your editor. Once you choose one, click on “Apply”:

Externally Hosted Video

If your video is externally hosted by another platform (other than YouTube/Vimeo/Wistia), you can change the source to “Externally Hosted Video”.

URL Field

This is where you can paste your video’s URL. Keep in mind that the URL has to be a valid one and it cannot contain any spelling mistakes. It should follow this structure: http://www.domain.com/video.extension:

Note: Please be advised that the URL you insert for the externally hosted video, will have to point to a video file that is one of these types:

  • mp4

  • m4v

  • mov

  • wmv

  • avi

  • mpg

  • ogv

  • 3gp

  • 3g2

Once the video is successfully uploaded, you will be able to customize it.

Video Style

In order to open the “Video Style” list, click on the field next to this option:

You can scroll through the list and choose the style you prefer. If you click on a certain style, you will be able to preview it in your editor and see how it looks like. When you decide on the one you prefer, click on “Apply”:

Uploaded Video

If, instead of using any of the platforms described above, you want to use a custom video, you can choose the “Uploaded Video” option from the “Source” section. This will allow you to upload a video of your own. Click on “Choose Video”:

This will open a new pop-up, which will allow you to either upload a picture from your PC or to select a video that you’ve already uploaded into your Media Library.

To upload a video, in the “Upload Files” tab of the pop-up, drag and drop the video or click on “Select Files” in order to browse through your computer and select a video:

If you’ve already uploaded the video in your Media Library, go to the “Media Library” tab and select the video from there:

Once the video is selected, click on the blue “Insert Into Post” button from the bottom right corner:

Video Style

You can choose a video style from the available list. In order to open the list, click on the field next to this option:

Scroll through the list of available styles and choose the one that works for you. If you are not sure about the appearance of a style, clicking on it will allow you to preview the style on your video. When you find the style you like best, click on it and then click on “Apply”:

Spotlightr (formerly Vooplayer)

If the video you want to insert into your page comes from Spotlightr, make sure to go to the “Source” section and select “VooPlayer/Spotlightr”.

URL Field

This is where you can insert the video URL, and then press “Enter”, or click anywhere outside the field:

Performance Optimizations

After the video from Spotlightr is added you can use the options below the “URL” field to customize it. The first option is the “Performance Optimizations” one. This option that optimizes the video performance will not influence the way the video looks in any way, the difference can only be seen in the backend. It can be activated or deactivated using the switch button next to it:

This option is enabled by default and it will optimize your video. This is why we recommend you keep it activated. However, if for some reason, you want to turn it off, you can do so by clicking on the On/Off switch next to it.

Adjustable Player Size

This option is also enabled by default, representing the fact that the player size of the video is automatically adjusted to the element it is embedded in. If you want to change the player size of the video, you will first have to disable this option, by clicking on the On/Off switch next to it:

If you do that, you will see the “Player Size Preset” option appear, below the “Adjustable player size” option, in the left sidebar. Click anywhere on the field below the “Player Size Preset” option, with the current size, to open the drop-down with the preset sizes:

The drop-down contains some preset sizes. You can choose one from there if it fits your video. The last option from the drop-down is the “Custom” one:

If you click on it, you will be able to adjust the Width and Height of the player, by manually entering numerical values in the fields, or by using the up/down arrows next to the fields:

You can also choose the resolution, by clicking on one of the two resolution sections:

Custom aspect ratio & orientation

The next option is the “Custom aspect ratio & orientation” one. With the help of it you can adjust the aspect ratio and the orientation of your player.

Note: Keep in mind that this option is not available if the “Adjustable player size” option is disabled.

The “Custom aspect ratio & orientation” option is disabled by default. If you want to use it, you will have to enable it, by clicking on the switch next to the option:

Once you activate it, you will be able to set a size preset and an orientation:

To choose an “Aspect Size Preset”, click on the field below the option:

This will open a drop-down that you can use to choose the preset that best fits the video:

To choose the “Aspect Orientation”, click on the field below the option:

Similar to the other field, when you click on it, a drop-down will open and you can choose the orientation of the video:

Custom start/end times

The next option that you can use on a video uploaded via Spotlightr is the “Custom start/end Times”. If you want to set the Video Start Time or the Video End Time, make sure to first activate the option by clicking on the on/off switch next to the option:

Once you’ve activated the option, you will see the “Video Start Time” and “Video End Time” fields, where you can set the minutes and seconds for each of them:

To change each value, simply enter the start or end minutes/seconds inside the respective fields, or use the up/down arrows:

Anonymize viewing data

The last option is the “Anonymize viewing data”. This is also disabled by default, but you can easily activate it by clicking on the on/off switch next to it:

Default Aspect Ratio (16:9)

Besides the “Source” options and all the specific options that each video source has, there are a few more options in the “Main Options” section. One of them is the “Default Aspect Ratio” one.

This is enabled by default, which means that, when you upload the video, the aspect ratio of it will be the default one (16:9). If you want to change that, disable this option by clicking on the switch next to it:

When you disable it, four different aspect ratios will appear below the option, and you can simply click on the one you prefer (16:9 / 4:3 / 1:1 / 9:16):

Another thing that you can do is to add your own custom ration. For that, click on “+Custom Ratio”:

Then, another section will open, where you can make your own custom ratio. You can enter the values that you want inside the two numerical fields, or you can use the up and down arrows to adjust the values:

These are the ways in which you can choose a default or a custom aspect ratio.

Note: This option is available for all the video sources, except for Spotlightr. A similar option that you can use for a video from Spotlightr is the “Custom aspect ratio & orientation” one, described above.

Sticky Float on Scroll

The next available option is the “Sticky Float on Scroll” one. This means that you can set up the video so that, when someone scrolls past it, a sticky float video icon will appear. The option is disabled by default. In order to activate it, click on the switch next to the option:

When you activate it, a new section will appear, with some options for the floating video:

Here is how to use them:

→ Float Position

This is where you can establish the position of the floating video from. The default float position is set on “Top Left”, but you can change it. Click on the field next to the option:

A sub-menu will open, with all the available float positions. Choose the one that you want to use:

Note: Keep in mind that you will be able to preview the floating video position in the editor only if you activate the “View Floating Video In Preview” option:

The options are as follows:

  • Top Left / Top Right: The floating video will be placed on the top left or right side of the screen.

  • Bottom Left / Bottom Right: The floating video will be placed on the bottom side of the screen, to the left or to the right.

  • Keep Original Position: In this case, the floating video will remain aligned to the original video.

Note: The “Sticky Float on Scroll” option is not activated by default to float on mobile phones. If you wish, you can activate this option on “Mobile View” too, but please keep in mind the following:

  • Since the screen size on mobile phones is a lot smaller than on a desktop, the “Right” and “Left” part of the positions of the floating video will not be very different from each other.

  • This is why you will only see the difference between the “Top” and “Bottom” positions on mobile when the video will start to float on scroll.

  • Also, again, because of the screen size, the dimensions of the floating video and that of the normally displayed video will be very similar.

→ Player Width on Float

This option refers to the width of the floating player. You can modify the width by manually entering a value in the field:

→ Top Padding on Float

You can set the distance from the floating video to the top side of the screen. In order to change it, you can simply write a numerical value inside the field next to the option:

→ Left/Right Padding on Float

Similar to the option above, you can set the distance between the floating video and the left or the right side of the screen.

This depends of the floating video’s position – if you choose “Top/Bottom left” float position, then you will be able to set the “Left Padding”. If you choose the “Top/Bottom right” float position, naturally, you will be able to set the “Right Padding”.

In order to change the distances, for both cases, you can simply write a numerical value inside the field next to the option:

→ Float On

Next, you can choose the devices on which the “Sticky Float on Scroll” option should be activated. You can leave it only activated on desktop, mobile or tablet view, or any combination in between these three devices. Simply choose the devices by clicking on them:

→ Enable Close Button

You can also choose whether the floating video should have a close button or not. By default, it does not have a close button. In order to insert one, click on the switch next to the option:

This is how the floating video and the close button look like when the option is activated:

→ View Floating Video in Preview

The last option from this section is “View Floating Video in Preview”, which is disabled by default.

As mentioned above, this option allows you to see any modifications that you make to the floating video directly in the editor.

To activate it, click on the switch next to the option:

Lazy Loading

Next, you have the option to lazy load the video, which will help with your Core Web Vitals, if enabled. Please check out this article to find out more about lazy loading and what impact it can have on your pages.

Video Cover / Thumbnail

The next option is the “Video cover / thumbnail” one, and it will allow you to use an image placeholder where the video would normally load. This will also improve the Core Web Vitals and it will decrease the page loading time.

For this option, as well, we have dedicated a separate article in which we provide more information, so please check it out here.

Bunny.net Stream

The last source you can use for a video is Bunny.net Stream:

Here are the options you can use for this source.

URL

Paste here the Bunny.net URL:

You can copy the ‘Direct Play’ from your stream library, if you hover over the available tooltip from the editor:

Autoplay

With this option is selected your video will automatically start playing when someone lands on the page:

Keep in mind though that this option is not currently supported by default on mobile devices (tablets, phones). Autoplay will also be muted by default on Chrome and Safari.

Preload

This option will preload the video as soon as someone accesses the page:

Loop

Activate this toggle if you want your video to play in a loop:

 

Muted

With this option active your video will start playing, but on mute:

Lazy Load

This option is active by default and cannot be modified:

Advanced Options

The last options of the “Main Options” section can be found under the “Advanced Options” section.

If you want to access the “Advanced” options, click on the down arrow next to the option:

You will see a list of options you can apply to your video. Here are all of the options that can be found here:

  • Autoplay: if this option is selected, the video will automatically start playing when someone accesses the page;

  • Disable YouTube cookies: you can disable YouTube cookies to ensure that your visitor’s data is not shared with YouTube;

  • Optimize related videos: checking this option will make the related videos show at the end of the video;

  • Hide player controls: if you need the play controls (such as volume, play/pause) to not be visible, check this option;

  • Hide full-screen: checking this option will make the Full-Screen button not visible;

  • Hide logo: if you choose this option, the source logo from the video will not be visible anymore;

  • Hide title bar: if you check this option, the title of the video will not be displayed;

  • Hide byline: when selected, this option will not display the author of the video;

  • Disable Playbar: check this option if you don’t want the Play button to show on screen;

  • Loop: if you choose this option, the video will start playing in loop, meaning it will start again once it finishes;

  • Allow Users to Download: if you use this option, besides viewing the uploaded video, the visitors of your website will also be able to download the respective video from your page;

  1. Available “Advanced options” for a Youtube video:

  • Autoplay

  • Disable YouTube cookies

  • Optimize related videos

  • Hide player controls

  • Hide full-screen

  • Hide logo

2. Available “Advanced options” for a Vimeo video:

  • Autoplay

  • Hide logo

  • Hide title bar

  • Hide byline

3. Available “Advanced options” for a Wistia video:

  • Autoplay

  • Disable Playbar (this option acts the same as the “Hide Controls” one)

  • Hide full-screen Button

4. Available “Advanced options” for an externally hosted video:

  • Autoplay

  • Hide player controls

  • Loop

5. Available “Advanced options” for an uploaded video:

  • Autoplay

  • Hide player controls

  • Loop

  • Allow Users to Download

6. Available “Advanced options” for a “VooPlayer/Spotlightr” video:

  • Video Thumbnail

Use the Other Options

After you’ve used the “Main Options” to add and personalize your video, you can also use the rest of the options from the left sidebar, in order to further customize your video (for example, change the layout and position, modify the borders, add shadow, etc.) :

If you need detailed information on how to use these options, you can check out our knowledge base, because we have separate tutorials on each of them.

Once you’re done customizing your video, don’t forget to save everything using the green “Save Work” button from the bottom left side of the editor.

This concludes the article about how to use a “Video” element. If you want to find out more information about various Thrive Architect elements, don’t hesitate to check out our tutorials page.

We hope this article was helpful for you. If that’s the case, don’t forget to reward our efforts with a smile below 🙂

Was this article helpful?

Related Articles

>