{"id":2447,"date":"2021-12-13T10:25:40","date_gmt":"2021-12-13T10:25:40","guid":{"rendered":"https:\/\/helptest.mainbrainer.com\/knowledge-base\/email-video-widget\/"},"modified":"2022-06-09T11:28:49","modified_gmt":"2022-06-09T11:28:49","slug":"email-video-widget","status":"publish","type":"ht_kb","link":"https:\/\/www.mainbrainer.com\/hc\/email\/creator\/video\/","title":{"rendered":"Email Video Widget"},"content":{"rendered":"<div class=\"aricle_container\">\n<p>The <strong>Video<\/strong> widget helps you add a video to your Email. Currently, we support video addition via Youtube and Vimeo. You can also add a caption text for the added video.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<h2>How to use a Video Widget in an Email campaign?<\/h2>\n<div style=\"padding: 14px 0;\"><\/div>\n<h3>Step 1<\/h3>\n<h3>Navigate to the Email Creator<\/h3>\n<p>Use the <strong>Main Menu<\/strong> on the left to create an Email and subsequently <a href=\"\/hc\/email\/creator\/how-to-create-email\/\" target=\"_blank\" rel=\"noopener noreferrer\">navigate to the Email Creator<\/a>.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<h3>Step 2<\/h3>\n<h3>Add a Video widget to your Email<\/h3>\n<p>The blank area on the left is the Work area where you design your Email, and the area on the right is the Tools area where all the available design elements are displayed as <a href=\"\/hc\/email\/creator\/widgets\/\" target=\"_blank\" rel=\"noopener noreferrer\">Widgets<\/a>.<\/p>\n<p>In order to add a video to your Email, 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 decoding=\"async\" class=\"alignnone wp-image-2094\" title=\"Email video widget\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/email-creator-video-widget.png\" alt=\"Email creator, the video widget is highlighted\" width=\"640\"><\/p>\n<div style=\"padding: 24px 0;\"><\/div>\n<h3>Step 3<\/h3>\n<h3>Specify the video that you would like to add to your Email<\/h3>\n<p>Once you drop the widget into the Work area, the widget <strong>Settings<\/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 decoding=\"async\" class=\"alignnone wp-image-2096\" title=\"Email video settings\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/email-video-settings-tab.png\" alt=\"Email creator, video widget. The video widget settings tab is highlighted\" width=\"640\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<p><strong>How to Upload a Video using the widget Settings:<\/strong><\/p>\n<ul style=\"list-style-type: circle;\">\n<li style=\"list-style-type: none;\">\n<ul style=\"list-style-type: circle;\">\n<li>Use the <strong>Video Platform<\/strong> dropdown menu (as shown in the below screenshot) to select the source \u2013 Youtube or Vimeo.\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2097 size-full\" title=\"Email video platform youtube\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/email-video-platform-youtube.png\" alt=\"Email creator, video widget. Video platform field is highlighted. Youtube is selected\" width=\"294\" height=\"347\"><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<div style=\"padding: 20px 0;\"><\/div>\n<ul style=\"list-style-type: circle;\">\n<li style=\"list-style-type: none;\">\n<ul style=\"list-style-type: circle;\">\n<li>Then, use the <strong>Add Link or Search<\/strong> field to enter a keyword to search for a video or add the URL of the video directly.\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2098 size-full\" title=\"Email video link\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/email-video-link-search.png\" alt=\"Email creator, video widget. Add link or search filed\" width=\"255\" height=\"74\"><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<div style=\"padding: 20px 0;\"><\/div>\n<ul style=\"list-style-type: circle;\">\n<li style=\"list-style-type: none;\">\n<ul style=\"list-style-type: circle;\">\n<li>As you type in the keyword\/URL, a list of video suggestions is displayed, as can be seen in the screenshot below. From the list of video suggestions, select the video that you want to add to your Email.\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2099 size-full\" title=\"Email video youtube upload\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/email-video-upload.png\" alt=\"Email creator, video widget. Youtube video upload\" width=\"562\" height=\"287\"><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<div style=\"padding: 24px 0;\"><\/div>\n<h3>Step 4<\/h3>\n<h3>Choose a Thumbnail picture for the video<\/h3>\n<p>In case you wish to customize the thumbnail picture for the video, click <strong>Select Image<\/strong> available under the <strong>Thumbnail setting<\/strong> to upload the desired picture.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2100 size-full\" title=\"Email video thumbnail\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/email-video-thumbnail.png\" alt=\"Email creator, video widget. Thumbnail settings\" width=\"558\" height=\"239\"><\/p>\n<div style=\"padding: 24px 0;\"><\/div>\n<h3>Step 5<\/h3>\n<h3>Enter a suitable caption for your video:<\/h3>\n<p>Use the area shown in the screenshot below to type in a relevant caption for the added video. Use the various 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-2101\" title=\"Email video text caption\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/email-video-caption-text.png\" alt=\"Email creator, video widget. Video captions text editor is highlighted\" width=\"640\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<p>In case you don&#8217;t wish to add a caption to the video, you can choose to do so by using the checkbox <strong>Hide Video Caption<\/strong> <em>(as highlighted in the below screenshot).<\/em><\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2102 size-full\" title=\"Email video hide caption\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/email-video-hide-caption.png\" alt=\"Email creator, video widget. Hide video caption checkbox is highlighted\" width=\"557\" height=\"188\"><\/p>\n<div style=\"padding: 24px 0;\"><\/div>\n<h3>Step 6<\/h3>\n<h3>Customize the Widget Style<\/h3>\n<p>Use the options under the <strong>Style<\/strong> tab to edit the appearance of the Video widget.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img decoding=\"async\" class=\"alignnone wp-image-2103\" title=\"Email video style\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/email-video-widget-style.png\" alt=\"Email creator, video widget. The video widget style tab is highlighted\" width=\"640\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<p><strong>The different design options available are:<\/strong><\/p>\n<h4>6.1 Video 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 <strong>caption<\/strong> background<\/li>\n<li><strong>Border Size and Color<\/strong>:<\/li>\n<li style=\"list-style-type: inherit; margin: 10px 0px 10px 20px;\">Select the color of the image border<\/li>\n<li style=\"list-style-type: inherit; margin: 10px 0px 10px 20px;\">change the size of the image border by using 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> &#8211; sizing bar to add rounded corners to the widget.<\/li>\n<\/ul>\n<div style=\"padding: 14px 0;\"><\/div>\n<h4>6.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 in relation to the added video.<\/li>\n<li>You may also choose to make the widget <strong>edge to edge<\/strong>, i.e. automatically 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 Email campaign!<\/p>\n<p>Let&#8217;s proceed, and have a look at how to add social media profile links to an Email using the <a href=\"\/hc\/email\/creator\/social\/\" target=\"_blank\" rel=\"noopener noreferrer\">Social 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 Email (via Youtube and Vimeo).<\/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":[228],"ht-kb-tag":[],"class_list":["post-2447","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-email-creator"],"_links":{"self":[{"href":"https:\/\/www.mainbrainer.com\/hc\/wp-json\/wp\/v2\/ht-kb\/2447","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=2447"}],"version-history":[{"count":11,"href":"https:\/\/www.mainbrainer.com\/hc\/wp-json\/wp\/v2\/ht-kb\/2447\/revisions"}],"predecessor-version":[{"id":9535,"href":"https:\/\/www.mainbrainer.com\/hc\/wp-json\/wp\/v2\/ht-kb\/2447\/revisions\/9535"}],"wp:attachment":[{"href":"https:\/\/www.mainbrainer.com\/hc\/wp-json\/wp\/v2\/media?parent=2447"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/wp-json\/wp\/v2\/ht-kb-category?post=2447"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/wp-json\/wp\/v2\/ht-kb-tag?post=2447"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}