{"id":2498,"date":"2021-12-13T10:25:52","date_gmt":"2021-12-13T10:25:52","guid":{"rendered":"https:\/\/helptest.mainbrainer.com\/knowledge-base\/landing-page-video-widget\/"},"modified":"2022-06-09T10:11:50","modified_gmt":"2022-06-09T10:11:50","slug":"landing-page-video-widget","status":"publish","type":"ht_kb","link":"https:\/\/www.mainbrainer.com\/hc\/landing-pages\/builder\/video\/","title":{"rendered":"Landing Page Video Widget"},"content":{"rendered":"<div class=\"aricle_container\">\n<p>The <strong>video<\/strong> widget helps you add a video to your landing page. Currently, we support video addition via Youtube, Vimeo, and direct uploads. You can also add a caption text for the added video.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<h2>How to Add a Video Widget to a Landing Page?<\/h2>\n<div style=\"padding: 14px 0;\"><\/div>\n<h3>Step 1 &#8211;&nbsp;Navigate to the Landing Page Builder<\/h3>\n<p>Use the <strong>Main Menu<\/strong> on the left to create a <strong>landing page<\/strong> and subsequently <a href=\"\/hc\/landing-pages\/builder\/create\/\" target=\"_blank\" rel=\"noopener noreferrer\">navigate to the Landing Page Builder<\/a>.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<h3>Step 2 &#8211;&nbsp;Add a Video Widget to your Landing Page<\/h3>\n<p>The blank area on the left is the <strong>work area<\/strong> where you design your landing page, and the area on the right is the tools area where all the available design elements are displayed as <a href=\"\/hc\/landing-pages\/builder\/widgets\/\" target=\"_blank\" rel=\"noopener noreferrer\">widgets<\/a>.<\/p>\n<p>In order to add a video to your landing page, drag and drop the <strong>Video<\/strong> widget to the work area <em>(as highlighted in the screenshot below).<\/em><\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1846 size-full\" title=\"Landing page video widget\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/landing-page-video-widget.png\" alt=\"Landing page builders drag and drop video widget\" width=\"528\" height=\"742\"><\/p>\n<div style=\"padding: 24px 0;\"><\/div>\n<h3>Step 3 &#8211; Upload\/Select the Video<\/h3>\n<p>As you drop the widget into the work area, the widget <strong>S<\/strong><strong>ettings&nbsp;<\/strong>are displayed on the right <em>(as highlighted in the screenshot below).<\/em><\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1848\" title=\"Landing page video settings\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/landing-page-video-widget-settings.png\" alt=\"Landing page video widget. Video widget settings tab is highlighted\" width=\"640\" height=\"428\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<p>Herein,<\/p>\n<ul>\n<li>use the <strong>Video Platform<\/strong> dropdown menu <em>(shown in the screenshot below)&nbsp;<\/em>to select the medium using which you want to add the video to your landing page \u2013 is it via Youtube\/ Vimeo or a direct upload.\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1849 size-full\" title=\"Landing page video youtube\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/landingpage-video-url.png\" alt=\"Landing page video widget. Select video platform. Youtube is selected\" width=\"294\" height=\"347\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<\/li>\n<li>Based on the option you select in this field, the subsequent field gathers the required information relevant to that action.\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1850 size-full\" title=\"Landing page video search\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/landing-page-video-search.png\" alt=\"Landing page video widget. The add link or search field\" width=\"268\" height=\"80\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<p><strong>For example:<\/strong><\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li style=\"margin-left: 20px;\"><strong>Scena<\/strong><strong>rio 1:&nbsp;<\/strong>You opt to add a video via Youtube:\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1851 size-full\" title=\"Landing page video upload\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/landing-page-video-youtube.png\" alt=\"Landing page video widget. Video upload settings. Youtube is selected\" width=\"562\" height=\"287\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<p>Here, use the <strong>Video Platform dropdown<\/strong> menu to select <strong>Youtube<\/strong>. Subsequently, use the <strong>Add Link or Search<\/strong> field as shown in the above screenshot to enter a keyword to search for the Youtube video. You can also directly add the URL of the video. As you type in the keyword\/ URL, a list of video suggestions is displayed &#8211; From the list of video suggestions, select the video that you want to add to your landing page.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<div style=\"padding: 14px 0;\"><\/div>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li style=\"margin-left: 20px;\"><strong>Scenario 2:&nbsp;<\/strong>You opt to add a video via Vimeo:<br \/>\nSimilarly, in this case, use the Video Platform dropdown menu to select <strong>Vimeo<\/strong>. Use the next field to enter a keyword to search for the Vimeo video. You can also directly add the URL of the video.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<div style=\"padding: 14px 0;\"><\/div>\n<ul>\n<li style=\"margin-left: 20px;\"><strong>Scenario 3:&nbsp;<\/strong>You opt to upload a video directly:\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1852 size-full\" title=\"Landing page video upload settings\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/landing-page-private-video.png\" alt=\"Landing page video. Video upload settings. Upload your own video is selected\" width=\"547\" height=\"231\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<p>In this case, use the dropdown to select the option \u2013 <strong>Upload your own video<\/strong>. Subsequently, click the <strong>Pick File<\/strong> button to upload the video from your system directly.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/div>\n<blockquote class=\"elevio-box-info\"><p><strong>Note:<\/strong> For direct uploads, the video you wish to upload should be in MP4 format.<\/p><\/blockquote>\n<div class=\"aricle_container\">\n<div style=\"padding: 14px 0;\"><\/div>\n<h3>Step 4 &#8211;&nbsp;Enter a Suitable Caption for the Video<\/h3>\n<p>Use the area highlighted in the screenshot below to type in a relevant caption for the added video. Use the different available tools to customize the font\/ style\/ color of the added text.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img decoding=\"async\" class=\"alignnone wp-image-1853\" title=\"Landing page video caption\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/landing-page-video-caption.png\" alt=\"Landing page video widget. Video caption settings is highlighted\" width=\"640\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<p>You can also choose to hide the video caption using the checkbox highlighted in the screenshot below.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1854 size-full\" title=\"Landing page video hide caption\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/landing-page-video-caption-hide.png\" alt=\"Landing page video widget. Hide video caption selected\" width=\"557\" height=\"188\"><\/p>\n<div style=\"padding: 24px 0;\"><\/div>\n<h3>Step 5 &#8211;&nbsp;Customize the Widget Style<\/h3>\n<p>Use the options under the <strong>Style&nbsp;<\/strong>tab to edit the appearance of the Video app.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img decoding=\"async\" class=\"alignnone wp-image-1855\" title=\"Landing page video style\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/landing-page-video-styling.png\" alt=\"Landing page video widget. Video caption style is highlighted\" width=\"640\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<p>Herein, the different design options available are:<\/p>\n<h4>5.1 Video Font settings and Background color<\/h4>\n<ul style=\"list-style-type: circle;\">\n<li><strong>Caption Background Color<\/strong> to change the color of the caption background<\/li>\n<li><strong>Border Size and Color<\/strong> to customize the widget border (use the sizing bar to adjust the thickness of the border)<\/li>\n<li><strong>Border Style<\/strong> to change the type of the widget border \u2013 solid, dotted, etc.,<\/li>\n<li><strong>Rounded Corners<\/strong> sizing bar to add rounded corners to the widget.<\/li>\n<\/ul>\n<div style=\"padding: 14px 0;\"><\/div>\n<h4>5.2 Video Setting<\/h4>\n<ul style=\"list-style-type: circle;\">\n<li><strong>Widget Width<\/strong> to adjust the width of the widget in the work area<\/li>\n<li><strong>Video Caption Position<\/strong> to change the alignment of the caption text with respect to the added video.<\/li>\n<li>You can also choose to make the widget <strong>Edge to Edge<\/strong>, i.e., fit the work area&#8217;s width.<\/li>\n<\/ul>\n<div style=\"padding: 14px 0;\"><\/div>\n<p>Click <strong>Save&nbsp;<\/strong>and that\u2019s it!<\/p>\n<p>You have successfully added a video to your landing page!<\/p>\n<p>Let&#8217;s proceed, and have a look at how to add a meeting invite to a landing page using the <a href=\"\/hc\/landing-pages\/builder\/calendar\/\" target=\"_blank\" rel=\"noopener noreferrer\">calendar widget<\/a>!<\/p>\n<\/div>\n<style>\n  .aricle_container p,.aricle_container li{color: rgba(0,0,0,.8)!important}  .aricle_container span{color:#0070ba!important}.aricle_container li,.aricle_container blockquote{font-size:18px!important;    font-weight: 400;<br \/>\n  }<br \/>\n<\/style>\n","protected":false},"excerpt":{"rendered":"<p>The video widget helps you add a video to your landing page. Currently, we support video addition via Youtube, Vimeo, and direct uploads.<\/p>\n","protected":false},"author":1,"comment_status":"open","ping_status":"open","template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"ht-kb-category":[214],"ht-kb-tag":[],"class_list":["post-2498","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-landing-page-builder"],"_links":{"self":[{"href":"https:\/\/www.mainbrainer.com\/hc\/wp-json\/wp\/v2\/ht-kb\/2498","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mainbrainer.com\/hc\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.mainbrainer.com\/hc\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/wp-json\/wp\/v2\/comments?post=2498"}],"version-history":[{"count":9,"href":"https:\/\/www.mainbrainer.com\/hc\/wp-json\/wp\/v2\/ht-kb\/2498\/revisions"}],"predecessor-version":[{"id":9293,"href":"https:\/\/www.mainbrainer.com\/hc\/wp-json\/wp\/v2\/ht-kb\/2498\/revisions\/9293"}],"wp:attachment":[{"href":"https:\/\/www.mainbrainer.com\/hc\/wp-json\/wp\/v2\/media?parent=2498"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/wp-json\/wp\/v2\/ht-kb-category?post=2498"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/wp-json\/wp\/v2\/ht-kb-tag?post=2498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}