{"id":113462822,"date":"2024-03-25T13:10:00","date_gmt":"2024-03-25T11:10:00","guid":{"rendered":"https:\/\/thrivethemes.com\/?post_type=ht_kb&#038;p=113462822"},"modified":"2025-10-31T09:33:22","modified_gmt":"2025-10-31T07:33:22","slug":"using-the-video-element-in-thrive-architect","status":"publish","type":"ht_kb","link":"https:\/\/thrivethemes.com\/docs\/using-the-video-element-in-thrive-architect\/","title":{"rendered":"Using the Video Element in Thrive Architect"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"How to Use the Video Element in the Thrive editor\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/3TYIGoOqOTw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>This article will show you how to add a video to your page using Thrive Architect.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"add-the-video-element\">Add the Video Element<\/h3>\n\n\n\n<p>In your Thrive Architect editor, click on the plus sign from the right sidebar. This is where you can add a new element from:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/plus-sign-3.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>Look for the <b>\u201cVideo\u201d<\/b> element or search for it in the search bar. Drag and drop it on your page wherever you desire:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/video-element.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>You will now notice that you have all the available options that you can apply to the video on the left sidebar:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/Thrive-Themes-Videos3D1.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"use-the-main-options\">Use the Main Options<\/h3>\n\n\n\n<p>Under the<b> &#8220;Main Options&#8221;<\/b> section of the left sidebar, you will be able to find some ways to quickly customize your &#8220;Video&#8221; element.<\/p>\n\n\n\n<p>Once you insert the &#8220;Video&#8221; element to your editor, you will see that, under the &#8220;Main Options&#8221; section, the first thing that you can change is the <b>&#8220;Source&#8221; <\/b>of the video.<\/p>\n\n\n\n<p><b>Note:<\/b> <i>If you have previously set up a <b>&#8220;Video&#8221;<\/b> type of custom field, using the <b>&#8220;Advanced Custom Fields&#8221;<\/b> 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 &#8220;Source&#8221; one. Instead of the &#8220;Source&#8221; option, you will see the &#8220;Element Type&#8221; options. These are the &#8220;Static&#8221; and &#8220;Dynamic&#8221; options.<\/i><\/p>\n\n\n\n<p><i>The <b>&#8220;Static&#8221;<\/b> 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 &#8220;Source&#8221; options, as described below.<\/i><\/p>\n\n\n\n<p><i>However, if you want to use the custom field you have previously set up, then you should click on the<b> &#8220;Dynamic&#8221;<\/b> option. If you select this option, you will be able to use the video that you have assigned as the value of the custom &#8220;Video&#8221; field:<\/i><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/acf63.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p><i>If you need more information about this, make sure to check out <a class=\"intercom-content-link\" href=\"https:\/\/thrivethemes.com\/tkb_item\/how-to-use-fields-setup-with-the-advanced-custom-fields-plugin-in-thrive-architect\/#tab-con-4\" target=\"_blank\" rel=\"noopener\">this article<\/a>, which provides more in-depth details about setting up a &#8220;Video&#8221; type of custom field for a &#8220;Video&#8221; element.<\/i><\/p>\n\n\n\n<p><i>Keep in mind that the<b> &#8220;Element Type&#8221;<\/b> section will be available only if you have followed the steps presented <a class=\"intercom-content-link\" href=\"https:\/\/thrivethemes.com\/tkb_item\/how-to-set-up-custom-fields-using-the-advanced-custom-fields-plugin\/\" target=\"_blank\" rel=\"noopener\">here<\/a>, in order to set up the custom fields.<\/i><\/p>\n\n\n\n<p>There are a few available video platforms that you can choose from when using the <b>&#8220;Source&#8221; <\/b>option, or you can upload the video from your PC. To select a source, click on the field next to the &#8220;Source&#8221; option:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2024\/04\/select-video-sourse.png\" alt=\"\" class=\"wp-image-113474094\"\/><\/figure><\/div>\n\n\n<p>From the small drop-down menu that opens, simply click on the source that you want to use:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2024\/04\/video-source-dropdown.png\" alt=\"\" class=\"wp-image-113474095\"\/><\/figure><\/div>\n\n\n<p>Here are the sources that you can choose from and how you can customize them:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"youtube\">YouTube<\/h4>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"url-field\">URL Field<\/h4>\n\n\n\n<p>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 \u201cEnter\u201d, or simply click outside the URL field to add the video to the page:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/url-1.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"video-start-time\">Video Start Time<\/h4>\n\n\n\n<p>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:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/start-time.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"video-style\">Video Style<\/h4>\n\n\n\n<p>You can choose a certain video style from the styles list. Open the list by clicking on the field:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/style-field.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>The &#8220;Video Style&#8221; 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 <b>\u201cApply\u201d <\/b>button:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/video-style-1.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"vimeo\">Vimeo<\/h4>\n\n\n\n<p>If you wish to upload a video from Vimeo, go to the <b>&#8220;Source&#8221; <\/b>section and change the source to Vimeo.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"url-field\">URL Field<\/h4>\n\n\n\n<p>In the URL field, paste the URL of the Vimeo video that you want to add to your page, and then press \u201cEnter\u201d or click anywhere outside the field:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/url-2.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"player-color\">Player Color<\/h4>\n\n\n\n<p>By default, there is no player color selected. In order to choose one, click on the color box:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2024\/04\/video-player-color.png\" alt=\"\" class=\"wp-image-113474097\"\/><\/figure><\/div>\n\n\n<p>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:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2024\/04\/video-player-color-hex.png\" alt=\"\" class=\"wp-image-113474098\"\/><\/figure><\/div>\n\n\n<p>After you pick the color, click on <b>\u201cApply\u201d<\/b>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2024\/04\/apply-player-color.png\" alt=\"\" class=\"wp-image-113474099\"\/><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"video-style\">Video Style<\/h4>\n\n\n\n<p>In order to choose a video style, click on the field next to the option:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/style-field.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>The <b>&#8220;Video Style&#8221;<\/b> 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 <b>&#8220;Apply&#8221;<\/b> button:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2024\/04\/apply-video-style.png\" alt=\"\" class=\"wp-image-113474100\"\/><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"wistia\">Wistia<\/h4>\n\n\n\n<p>If the video you want to insert into your page comes from Wistia, make sure to go to the <b>&#8220;Source&#8221; <\/b>section and select &#8220;Wistia&#8221;.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"url-field\">URL Field<\/h4>\n\n\n\n<p>This is where you can insert the Wistia URL, and then press &#8220;Enter&#8221;, or click anywhere outside the field:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/url-3.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"player-color\">Player Color<\/h4>\n\n\n\n<p>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.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"video-start-time\">Video Start Time<\/h4>\n\n\n\n<p>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:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/starttime.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"video-style\">Video Style<\/h4>\n\n\n\n<p>In order to open the <b>&#8220;Video Style&#8221;<\/b> list, click on the field next to this option:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/style-field.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>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 <b>&#8220;Apply&#8221;<\/b>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2024\/04\/apply-video-style-1.png\" alt=\"\" class=\"wp-image-113474102\"\/><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"externally-hosted-video\">Externally Hosted Video<\/h4>\n\n\n\n<p>If your video is externally hosted by another platform (other than YouTube\/Vimeo\/Wistia), you can change the source to <b>&#8220;Externally Hosted Video&#8221;<\/b>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"url-field\">URL Field<\/h4>\n\n\n\n<p>This is where you can paste your video&#8217;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: <i><a class=\"intercom-content-link\" href=\"https:\/\/www.domain.com\/video.extension\" target=\"_blank\" rel=\"noopener\">https:\/\/www.domain.com\/video.extension<\/a>:<\/i><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/url-ehv.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p><b>Note:<\/b> <i>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:<\/i><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li> <i style=\"font-weight: var(--g-regular-weight, normal);\">mp4<\/i> <\/li>\n\n\n\n<li> <i style=\"font-weight: var(--g-regular-weight, normal);\">m4v<\/i> <\/li>\n\n\n\n<li> <i style=\"font-weight: var(--g-regular-weight, normal);\">mov<\/i> <\/li>\n\n\n\n<li> <i style=\"font-weight: var(--g-regular-weight, normal);\">wmv<\/i> <\/li>\n\n\n\n<li> <i style=\"font-weight: var(--g-regular-weight, normal);\">avi<\/i> <\/li>\n\n\n\n<li> <i style=\"font-weight: var(--g-regular-weight, normal);\">mpg<\/i> <\/li>\n\n\n\n<li> <i style=\"font-weight: var(--g-regular-weight, normal);\">ogv<\/i> <\/li>\n\n\n\n<li> <i style=\"font-weight: var(--g-regular-weight, normal);\">3gp<\/i> <\/li>\n\n\n\n<li> <i style=\"font-weight: var(--g-regular-weight, normal);\">3g2<\/i> <\/li>\n<\/ul>\n\n\n\n<p>Once the video is successfully uploaded, you will be able to customize it.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"video-style\">Video Style<\/h4>\n\n\n\n<p>In order to open the <b>&#8220;Video Style&#8221;<\/b> list, click on the field next to this option:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/style-field.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>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 <b>&#8220;Apply&#8221;<\/b>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/video-style-1.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"uploaded-video\">Uploaded Video<\/h4>\n\n\n\n<p>If, instead of using any of the platforms described above, you want to use a custom video, you can choose the <b>\u201cUploaded Video\u201d<\/b> option from the \u201cSource\u201d section. This will allow you to upload a video of your own. Click on<b> \u201cChoose Video\u201d<\/b>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/choose-video1.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>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\u2019ve already uploaded into your Media Library.<\/p>\n\n\n\n<p>To upload a video, in the <b>\u201cUpload Files\u201d<\/b> tab of the pop-up, drag and drop the video or click on <b>\u201cSelect Files\u201d<\/b> in order to browse through your computer and select a video:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/upload.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>If you\u2019ve already uploaded the video in your Media Library, go to the <b>\u201cMedia Library\u201d <\/b>tab and select the video from there:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/media-library-2.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>Once the video is selected, click on the blue <b>\u201cInsert Into Post\u201d<\/b> button from the bottom right corner:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2024\/04\/insert-into-post.png\" alt=\"\" class=\"wp-image-113474103\"\/><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"video-style\">Video Style<\/h4>\n\n\n\n<p>You can choose a video style from the available list. In order to open the list, click on the field next to this option:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/style-field.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>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 <b>\u201cApply\u201d<\/b>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/video-style-1.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"spotlightr-formerly-vooplayer\">Spotlightr (formerly Vooplayer)<\/h4>\n\n\n\n<p>If the video you want to insert into your page comes from Spotlightr, make sure to go to the <b>&#8220;Source&#8221; <\/b>section and select &#8220;VooPlayer\/Spotlightr&#8221;.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"url-field\">URL Field<\/h4>\n\n\n\n<p>This is where you can insert the video URL, and then press <b>&#8220;Enter&#8221;<\/b>, or click anywhere outside the field:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2024\/04\/vooplayer-url.png\" alt=\"\" class=\"wp-image-113474104\"\/><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"performance-optimizations\">Performance Optimizations<\/h4>\n\n\n\n<p>After the video from Spotlightr is added you can use the options below the &#8220;URL&#8221; field to customize it. The first option is the <b>&#8220;Performance Optimizations&#8221;<\/b> 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:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/performance-otp-1.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>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 <b>On\/Off switch<\/b> next to it.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"adjustable-player-size\">Adjustable Player Size<\/h4>\n\n\n\n<p>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 <b>On\/Off switch <\/b>next to it:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/adj-pl-size-1.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>If you do that, you will see the <b>&#8220;Player Size Preset&#8221;<\/b> option appear, below the &#8220;Adjustable player size&#8221; option, in the left sidebar. Click anywhere on the field below the &#8220;Player Size Preset&#8221; option, with the current size, to open the drop-down with the preset sizes:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/preset-1.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>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<b> &#8220;Custom&#8221; <\/b>one:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/dropdow-1.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>If you click on it, you will be able to adjust the Width and Height of the player, by manually entering <b>numerical values<\/b> in the fields, or by using the <b>up\/down arrows <\/b>next to the fields:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/WIDTh-height-1.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>You can also choose the <b>resolution<\/b>, by clicking on one of the two resolution sections:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/resol.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"custom-aspect-ratio--orientation\">Custom aspect ratio &amp; orientation<\/h4>\n\n\n\n<p>The next option is the<b> &#8220;Custom aspect ratio &amp; orientation&#8221;<\/b> one. With the help of it you can adjust the aspect ratio and the orientation of your player.<\/p>\n\n\n\n<p><b>Note:<\/b> <i>Keep in mind that this option is not available if the \u201cAdjustable player size\u201d option is disabled.<\/i><\/p>\n\n\n\n<p>The &#8220;Custom aspect ratio &amp; orientation&#8221; 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:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/aspect-ratio.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>Once you activate it, you will be able to set a<b> size <\/b>preset and an<b> orientation<\/b>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/aspect-ratio2.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>To choose an <b>&#8220;Aspect Size Preset&#8221;<\/b>, click on the field below the option:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/aspect-ratio3.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>This will open a drop-down that you can use to choose the preset that best fits the video:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/aspect-ratio5.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>To choose the <b>&#8220;Aspect Orientation&#8221;<\/b>, click on the field below the option:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/aspect-ratio4.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>Similar to the other field, when you click on it, a drop-down will open and you can choose the orientation of the video:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/aspect-ratio6.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"custom-startend-times\">Custom start\/end times<\/h4>\n\n\n\n<p>The next option that you can use on a video uploaded via Spotlightr is the <b>&#8220;Custom start\/end Times&#8221;<\/b>. 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:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/custom-start-end.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>Once you&#8217;ve activated the option, you will see the &#8220;Video Start Time&#8221; and &#8220;Video End Time&#8221; fields, where you can set the minutes and seconds for each of them:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/star-end-time.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>To change each value, simply enter the start or end minutes\/seconds inside the respective fields, or use the up\/down arrows:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/star-end-time2.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"anonymize-viewing-data\">Anonymize viewing data<\/h4>\n\n\n\n<p>The last option is the &#8220;Anonymize viewing data&#8221;. This is also disabled by default, but you can easily activate it by clicking on the on\/off switch next to it:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2024\/04\/anonymize-video-viewing-data.png\" alt=\"\" class=\"wp-image-113474106\"\/><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"default-aspect-ratio-169\">Default Aspect Ratio (16:9)<\/h4>\n\n\n\n<p>Besides the &#8220;Source&#8221; options and all the specific options that each video source has, there are a few more options in the &#8220;Main Options&#8221; section. One of them is the <b>&#8220;Default Aspect Ratio&#8221;<\/b> one.<\/p>\n\n\n\n<p>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:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/ratio1.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>When you disable it, four different aspect ratios will appear below the option, and you can simply click on the one you prefer (<b>16:9<\/b> \/ <b>4:3<\/b> \/ <b>1:1<\/b> \/<b> 9:16<\/b>):<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/ratio2.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>Another thing that you can do is to add your own custom ration. For that, click on <b>&#8220;+Custom Ratio&#8221;:<\/b><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/ratio3.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>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:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/ratio4.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>These are the ways in which you can choose a default or a custom aspect ratio.<\/p>\n\n\n\n<p><b>Note:<\/b> <i>This option is available for all the video sources, except for <b>Spotlightr<\/b>. A similar option that you can use for a video from Spotlightr is the &#8220;Custom aspect ratio &amp; orientation&#8221; one, described above.<\/i><\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"sticky-float-on-scroll\">Sticky Float on Scroll<\/h4>\n\n\n\n<p>The next available option is the <b>&#8220;Sticky Float on Scroll&#8221;<\/b> 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:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2024\/04\/video-sticky.png\" alt=\"\" class=\"wp-image-113474107\"\/><\/figure><\/div>\n\n\n<p>When you activate it, a new section will appear, with some options for the floating video:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2024\/04\/floating-video-settings.png\" alt=\"\" class=\"wp-image-113474108\"\/><\/figure><\/div>\n\n\n<p>Here is how to use them:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"float-position\">\u2192 Float Position<\/h4>\n\n\n\n<p>This is where you can establish the position of the floating video from. The default float position is set on &#8220;Top Left&#8221;, but you can change it. Click on the field next to the option:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/float1.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>A sub-menu will open, with all the available float positions. Choose the one that you want to use:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/float2.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p><b>Note:<\/b> <i>Keep in mind that you will be able to preview the floating video position in the editor only if you activate the <b>&#8220;View Floating Video In Preview&#8221;<\/b> option:<\/i><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/float3.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>The options are as follows:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li> <b>Top Left \/ Top Right<\/b><span style=\"font-weight: var(--g-regular-weight, normal);\">: The floating video will be placed on the top left or right side of the screen.<\/span> <\/li>\n\n\n\n<li> <b>Bottom Left \/ Bottom Right<\/b><span style=\"font-weight: var(--g-regular-weight, normal);\">: The floating video will be placed on the bottom side of the screen, to the left or to the right.<\/span> <\/li>\n\n\n\n<li> <b>Keep Original Position:<\/b><span style=\"font-weight: var(--g-regular-weight, normal);\"> In this case, the floating video will remain aligned to the original video.<\/span> <\/li>\n<\/ul>\n\n\n\n<p><b>Note:<\/b> <i>The <b>&#8220;Sticky Float on Scroll&#8221;<\/b> option is not activated by default to float on mobile phones. If you wish, you can activate this option on &#8220;Mobile View&#8221; too, but please keep in mind the following:<\/i><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li> <i style=\"font-weight: var(--g-regular-weight, normal);\">Since the screen size on mobile phones is a lot smaller than on a desktop, the &#8220;Right&#8221; and &#8220;Left&#8221; part of the positions of the floating video will not be very different from each other.<\/i> <\/li>\n\n\n\n<li> <i style=\"font-weight: var(--g-regular-weight, normal);\">This is why you will only see the difference between the &#8220;Top&#8221; and &#8220;Bottom&#8221; positions on mobile when the video will start to float on scroll.<\/i> <\/li>\n\n\n\n<li> <i style=\"font-weight: var(--g-regular-weight, normal);\">Also, again, because of the screen size, the dimensions of the floating video and that of the normally displayed video will be very similar.<\/i> <\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"player-width-on-float\">\u2192 Player Width on Float<\/h4>\n\n\n\n<p>This option refers to the width of the floating player. You can modify the width by manually entering a value in the field:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/float4.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"top-padding-on-float\">\u2192 Top Padding on Float<\/h4>\n\n\n\n<p>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:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/op.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"leftright-padding-on-float\">\u2192 Left\/Right Padding on Float<\/h4>\n\n\n\n<p>Similar to the option above, you can set the distance between the floating video and the left or the right side of the screen.<\/p>\n\n\n\n<p>This depends of the floating video&#8217;s position &#8211; if you choose &#8220;<b>Top\/Bottom left<\/b>&#8221; float position, then you will be able to set the &#8220;Left Padding&#8221;. If you choose the &#8220;<b>Top\/Bottom right<\/b>&#8221; float position, naturally, you will be able to set the &#8220;Right Padding&#8221;.<\/p>\n\n\n\n<p>In order to change the distances, for both cases, you can simply write a numerical value inside the field next to the option:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/left-right.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"float-on\">\u2192 Float On<\/h4>\n\n\n\n<p>Next, you can choose the devices on which the &#8220;Sticky Float on Scroll&#8221; 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:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/float-on.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"enable-close-button\">\u2192 Enable Close Button<\/h4>\n\n\n\n<p>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:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2024\/04\/enable-video-close-button.png\" alt=\"\" class=\"wp-image-113474109\"\/><\/figure><\/div>\n\n\n<p>This is how the floating video and the close button look like when the option is activated:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/close2.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"view-floating-video-in-preview\">\u2192 View Floating Video in Preview<\/h4>\n\n\n\n<p>The last option from this section is &#8220;View Floating Video in Preview&#8221;, which is disabled by default.<\/p>\n\n\n\n<p>As mentioned above, this option allows you to see any modifications that you make to the floating video directly in the editor.<\/p>\n\n\n\n<p>To activate it, click on the switch next to the option:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2024\/04\/floating-video-preview.png\" alt=\"\" class=\"wp-image-113474110\"\/><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"h_f49895a7b2\">Lazy Loading<\/h4>\n\n\n\n<p>Next, you have the option to lazy load the video, which will help with your Core Web Vitals, if enabled. Please check out <a class=\"intercom-content-link\" href=\"https:\/\/help.thrivethemes.com\/en\/articles\/5448023-enabling-lazy-loading-for-video-elements\" target=\"_blank\" rel=\"noopener\">this article<\/a> to find out more about lazy loading and what impact it can have on your pages.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/Lazy-Load-Videos-Thrive-Architect-1.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"h_f49895a7b2\">Video Cover \/ Thumbnail<\/h4>\n\n\n\n<p>The next option is the &#8220;Video cover \/ thumbnail&#8221; 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.<\/p>\n\n\n\n<p>For this option, as well, we have dedicated a separate article in which we provide more information, so please check it out <a class=\"intercom-content-link\" href=\"https:\/\/help.thrivethemes.com\/en\/articles\/5448025-should-i-use-the-video-cover-thumbnail-option-for-my-video-element\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/Lazy-Load-Videos-Thrive-Architect-2.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"h_b0b282a022\">Bunny.net Stream<\/h4>\n\n\n\n<p>The last source you can use for a video is Bunny.net Stream:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/bunny.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>Here are the options you can use for this source.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">URL<\/h3>\n\n\n\n<p>Paste here the Bunny.net URL:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2024\/04\/bunny-url.png\" alt=\"\" class=\"wp-image-113474111\"\/><\/figure><\/div>\n\n\n<p>You can copy the &#8216;Direct Play&#8217; from your stream library, if you hover over the available tooltip from the editor:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/openlibrary.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h_04da198981\">Autoplay<\/h3>\n\n\n\n<p>With this option is selected your video will automatically start playing when someone lands on the page:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/autplay-.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>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.<\/p>\n\n\n\n<p><strong>Note:<\/strong> When AUTOPLAY or MUTE is enabled in Bunny.net, the RUM.js (Real User Monitoring) kicks off and continues to check periodically. When one of the periodic checks fails, you may see an error.<\/p>\n\n\n\n<p>Please note that this is not a bug that we can fix ourselves. We can&#8217;t interrupt the periodic checking done by RUM.js. This is something that only Bunny.net can control.<\/p>\n\n\n\n<p>As a workaround, disable the Autoplay or Muted toggles so RUM.js won&#8217;t run its periodic checks.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h_04da198981\">Preload<\/h3>\n\n\n\n<p>This option will preload the video as soon as someone accesses the page:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/preload.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h_04da198981\">Loop<\/h3>\n\n\n\n<p>Activate this toggle if you want your video to play in a loop:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/loop.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h_04da198981\">Muted<\/h3>\n\n\n\n<p>With this option active your video will start playing, but on mute:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/muted.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p><strong>Note:<\/strong> When AUTOPLAY or MUTE is enabled in Bunny.net, the RUM.js (Real User Monitoring) kicks off and continues to check periodically. When one of the periodic checks fails, you may see an error.<\/p>\n\n\n\n<p>Please note that this is not a bug that we can fix ourselves. We can&#8217;t interrupt the periodic checking done by RUM.js. This is something that only Bunny.net can control.<\/p>\n\n\n\n<p>As a workaround, disable the Autoplay or Muted toggles so RUM.js won&#8217;t run its periodic checks.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h_04da198981\">Lazy Load<\/h3>\n\n\n\n<p>This option is active by default and cannot be modified:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/checked.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"advanced-options\">Advanced Options<\/h2>\n\n\n\n<p>The last options of the &#8220;Main Options&#8221; section can be found under the &#8220;Advanced Options&#8221; section.<\/p>\n\n\n\n<p>If you want to access the \u201cAdvanced\u201d options, click on the down arrow next to the option:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2024\/04\/bunny-advanced.png\" alt=\"\" class=\"wp-image-113474113\"\/><\/figure><\/div>\n\n\n<p>You will see a list of options you can apply to your video. Here are all of the options that can be found here:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li> <b>Autoplay:<\/b><span style=\"font-weight: var(--g-regular-weight, normal);\"> if this option is selected, the video will automatically start playing when someone accesses the page;<\/span> <\/li>\n\n\n\n<li> <b>Disable YouTube cookies<\/b><span style=\"font-weight: var(--g-regular-weight, normal);\">: you can disable YouTube cookies to ensure that your visitor\u2019s data is not shared with YouTube;<\/span> <\/li>\n\n\n\n<li><b>Optimize related videos<\/b><span style=\"font-weight: var(--g-regular-weight, normal);\">: checking this option will hide the related videos at the end of the video<\/span>;<\/li>\n\n\n\n<li> <b>Hide player controls<\/b><span style=\"font-weight: var(--g-regular-weight, normal);\">: if you need the play controls (such as volume, play\/pause) to not be visible, check this option;<\/span> <\/li>\n\n\n\n<li> <b>Hide full-screen<\/b><span style=\"font-weight: var(--g-regular-weight, normal);\">: checking this option will make the Full-Screen button not visible;<\/span> <\/li>\n\n\n\n<li> <b>Hide logo:<\/b><span style=\"font-weight: var(--g-regular-weight, normal);\"> if you choose this option, the source logo from the video will not be visible anymore;<\/span> <\/li>\n\n\n\n<li> <b>Hide title bar:<\/b><span style=\"font-weight: var(--g-regular-weight, normal);\"> if you check this option, the title of the video will not be displayed;<\/span> <\/li>\n\n\n\n<li> <b>Hide byline: <\/b><span style=\"font-weight: var(--g-regular-weight, normal);\">when selected, this option will not display the author of the video;<\/span> <\/li>\n\n\n\n<li> <b>Disable Playbar<\/b><span style=\"font-weight: var(--g-regular-weight, normal);\">: check this option if you don\u2019t want the Play button to show on screen;<\/span> <\/li>\n\n\n\n<li> <b>Loop:<\/b><span style=\"font-weight: var(--g-regular-weight, normal);\"> if you choose this option, the video will start playing in loop, meaning it will start again once it finishes;<\/span> <\/li>\n\n\n\n<li> <b>Allow Users to Download:<\/b><span style=\"font-weight: var(--g-regular-weight, normal);\"> 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;<\/span> <\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li> <b><i> Available &#8220;Advanced options&#8221; for a Youtube video: <\/i><\/b> <\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li> <i style=\"font-weight: var(--g-regular-weight, normal);\">Autoplay<\/i> <\/li>\n\n\n\n<li> <i style=\"font-weight: var(--g-regular-weight, normal);\">Disable YouTube cookies<\/i> <\/li>\n\n\n\n<li> <i style=\"font-weight: var(--g-regular-weight, normal);\">Optimize related videos<\/i> <\/li>\n\n\n\n<li> <i style=\"font-weight: var(--g-regular-weight, normal);\">Hide player controls<\/i> <\/li>\n\n\n\n<li> <i style=\"font-weight: var(--g-regular-weight, normal);\">Hide full-screen<\/i> <\/li>\n\n\n\n<li> <i style=\"font-weight: var(--g-regular-weight, normal);\">Hide logo<\/i> <\/li>\n<\/ul>\n\n\n\n<p><b><i> <\/i><\/b> 2.<b> Available &#8220;Advanced options&#8221; for a Vimeo video: <\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li> <i style=\"font-weight: var(--g-regular-weight, normal);\">Autoplay<\/i> <\/li>\n\n\n\n<li> <i style=\"font-weight: var(--g-regular-weight, normal);\">Hide logo<\/i> <\/li>\n\n\n\n<li> <i style=\"font-weight: var(--g-regular-weight, normal);\">Hide title bar<\/i> <\/li>\n\n\n\n<li> <i style=\"font-weight: var(--g-regular-weight, normal);\">Hide byline<\/i> <\/li>\n<\/ul>\n\n\n\n<p><b><i> <\/i><\/b> 3.<b> Available &#8220;Advanced options&#8221; for a Wistia video: <\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li> <i style=\"font-weight: var(--g-regular-weight, normal);\">Autoplay<\/i> <\/li>\n\n\n\n<li> <i style=\"font-weight: var(--g-regular-weight, normal);\">Disable Playbar (this option acts the same as the &#8220;Hide Controls&#8221; one)<\/i> <\/li>\n\n\n\n<li> <i style=\"font-weight: var(--g-regular-weight, normal);\">Hide full-screen Button<\/i> <\/li>\n<\/ul>\n\n\n\n<p><b><i> <\/i><\/b> 4.<b> Available &#8220;Advanced options&#8221; for an externally hosted video: <\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li> <i style=\"font-weight: var(--g-regular-weight, normal);\">Autoplay<\/i> <\/li>\n\n\n\n<li> <i style=\"font-weight: var(--g-regular-weight, normal);\">Hide player controls<\/i> <\/li>\n\n\n\n<li> <i style=\"font-weight: var(--g-regular-weight, normal);\">Loop<\/i> <\/li>\n<\/ul>\n\n\n\n<p><b><i> <\/i><\/b> 5.<b> Available &#8220;Advanced options&#8221; for an uploaded video: <\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li> <i style=\"font-weight: var(--g-regular-weight, normal);\">Autoplay<\/i> <\/li>\n\n\n\n<li> <i style=\"font-weight: var(--g-regular-weight, normal);\">Hide player controls<\/i> <\/li>\n\n\n\n<li> <i style=\"font-weight: var(--g-regular-weight, normal);\">Loop<\/i> <\/li>\n\n\n\n<li> <i style=\"font-weight: var(--g-regular-weight, normal);\">Allow Users to Download<\/i> <\/li>\n<\/ul>\n\n\n\n<p><b><i> <\/i><\/b> 6.<b> Available &#8220;Advanced options&#8221; for a &#8220;VooPlayer\/Spotlightr&#8221; video: <\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li> <i style=\"font-weight: var(--g-regular-weight, normal);\">Video Thumbnail<\/i> <\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"use-the-other-options\">Use the Other Options<\/h3>\n\n\n\n<p>After you\u2019ve used the &#8220;Main Options&#8221; 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.) :<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/other-options.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>If you need detailed information on how to use these options, you can check out our <a class=\"intercom-content-link\" href=\"https:\/\/thrivethemes.com\/thrive-knowledge-base\/\" target=\"_blank\" rel=\"noopener\">knowledge base<\/a>, because we have separate tutorials on each of them.<\/p>\n\n\n\n<p>Once you\u2019re done customizing your video, don\u2019t forget to save everything using the green <b>\u201cSave Work\u201d<\/b> button from the bottom left side of the editor.<\/p>\n\n\n\n<p>This concludes the article about how to use a &#8220;Video&#8221; element. If you want to find out more information about various Thrive Architect elements, don\u2019t hesitate to check out our <a class=\"intercom-content-link\" href=\"https:\/\/thrivethemes.com\/thrive-architect-tutorials\/\" target=\"_blank\" rel=\"noopener\">tutorials page<\/a>.<\/p>\n\n\n\n<p>We hope this article was helpful for you. If that\u2019s the case, don\u2019t forget to reward our efforts with a smile below \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 \u201cVideo\u201d element or search for it in the [&hellip;]<\/p>\n","protected":false},"author":253020,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"ht-kb-category":[34053],"ht-kb-tag":[],"class_list":["post-113462822","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-thrive-architect-elements","post-wrapper","thrv_wrapper"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/thrivethemes.com\/wp-json\/wp\/v2\/ht-kb\/113462822","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thrivethemes.com\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/thrivethemes.com\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/thrivethemes.com\/wp-json\/wp\/v2\/users\/253020"}],"replies":[{"embeddable":true,"href":"https:\/\/thrivethemes.com\/wp-json\/wp\/v2\/comments?post=113462822"}],"version-history":[{"count":0,"href":"https:\/\/thrivethemes.com\/wp-json\/wp\/v2\/ht-kb\/113462822\/revisions"}],"wp:attachment":[{"href":"https:\/\/thrivethemes.com\/wp-json\/wp\/v2\/media?parent=113462822"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/thrivethemes.com\/wp-json\/wp\/v2\/ht-kb-category?post=113462822"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/thrivethemes.com\/wp-json\/wp\/v2\/ht-kb-tag?post=113462822"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}