{"id":4889,"date":"2021-12-14T14:14:30","date_gmt":"2021-12-14T06:14:30","guid":{"rendered":"https:\/\/www.enablex.io\/developer\/?page_id=4889"},"modified":"2025-04-04T20:01:17","modified_gmt":"2025-04-04T12:01:17","slug":"virtual-background-with-video-embed","status":"publish","type":"page","link":"https:\/\/doc.smartflomeet.ttns.in\/developer\/video\/low-code-video-embed\/video-embed-features\/virtual-background-with-video-embed\/","title":{"rendered":"Virtual Background with Video Embed"},"content":{"rendered":"\n<blockquote class=\"wp-block-quote\"><p>At a time when nearly everyone is working from home and dialing into meetings, a virtual video background is a way to use a professional backdrop to represent your company, you could add a polished look to your professional meetings.<\/p><\/blockquote>\n\n\n\n<h3>Table of Contents<\/h3>\n\n\n\n<ul><li><a href=\"#overview\">Overview<\/a><\/li><li><a href=\"#setup-virtual-background\">Setup Virtual Background<\/a><ul><li><a href=\"#opt-to-use\">Enable the feature<\/a><\/li><li><a href=\"#setup-image-lib\">Setup Default Image Library<\/a><\/li><\/ul><\/li><li><a href=\"#dynamic-image-lib\">Dynamic Image Library using Query String<\/a><\/li><\/ul>\n\n\n\n<a name=\"overview\"><\/a>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2>Overview<\/h2>\n\n\n\n<p>The Virtual Background feature allows users to blur own Video Background or to use a image from Library as as Video Background. This feature works best with a physical green screen at your backdrop or with uniform lighting on a plain backdrop. In other cases, user may experience patchy edges. <\/p>\n\n\n\n<a name=\"setup-virtual-background\"><\/a>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2>Setup Virtual Background<\/h2>\n\n\n\n<p>In case you look to use Virtual Background in your Embed, you need to do the following:<\/p>\n\n\n\n<a name=\"opt-to-use\"><\/a>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>Enable Virtual Background<\/h3>\n\n\n\n<p>To use Virtual Background with your Embed, you must first enable it through the Visual Builder. Visual Builder helps you to edit the Embed Template by opting more features to use. Do the following in the Portal:<\/p>\n\n\n\n<ul><li><strong>Approach<\/strong><ul><li><strong>While getting started with Embed:<\/strong> At 4th Step of &#8220;Get Started&#8221; wizard, you get <em> &#8220;Visual Builder&#8221;<\/em> to make edits on the chosen Template. <\/li><li><strong>To use with pre-configured Embed: <\/strong>From &#8220;<em>Video -&gt; Settings&#8221;<\/em> menu; you reach Embed Dashboard. Pull out the <em>&#8220;Video Embed&#8221;<\/em> dropdown and select <em>&#8220;Edit Template&#8221;<\/em> to get the &#8220;Visual Builder&#8221;.<\/li><\/ul><\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" width=\"300\" height=\"236\" src=\"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-content\/uploads\/2025\/04\/video-embed-300x236-1.png\" alt=\"\" class=\"wp-image-7297\"\/><\/figure><\/div>\n\n\n\n<ul><li><strong>Enable<\/strong><ul><li>Go to the <em>&#8220;Manage Features&#8221;<\/em> tab of <em>&#8220;Visual Builder&#8221;<\/em>.<\/li><li>You get the <strong>&#8220;Virtual Builder&#8221;<\/strong> feature. Check the chechbox against it to enable.<\/li><li>Click &#8220;<strong>Build App&#8221;<\/strong> button to update your Embed with this feature. <\/li><\/ul><\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-medium\"><img loading=\"lazy\" width=\"300\" height=\"297\" src=\"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-content\/uploads\/2025\/04\/virtual-bg-feature-300x297.png\" alt=\"\" class=\"wp-image-7299\" srcset=\"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-content\/uploads\/2025\/04\/virtual-bg-feature-300x297.png 300w, https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-content\/uploads\/2025\/04\/virtual-bg-feature-150x150.png 150w, https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-content\/uploads\/2025\/04\/virtual-bg-feature.png 607w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/figure><\/div>\n\n\n\n<ul><li><strong>Experience<\/strong> <ul><li>Open your App with the Video Embed.<\/li><li>See the Virtual Background option in Toolbar. Click it.<\/li><li>It opens up a Preview Virtual Background tool before purlishing. It comes with pre-configured &#8220;Blur&#8221; background Option.<\/li><li>Try it to experience. <\/li><\/ul><\/li><\/ul>\n\n\n\n<a name=\"setup-image-lib\"><\/a>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>Setup Default Image Library<\/h3>\n\n\n\n<p>You need to define a Image Library which will be used in the Video Embed for users to use as their Virtual Background. Portal helps you setup your Image Library by adding maximum of 10 External Image URLs.<\/p>\n\n\n\n<ul><li>Go to Portal. Follow &#8220;Video -&gt; Settings&#8221; menu to reach Embed Dashboard. <\/li><li>Pull out the <em>&#8220;Video Embed&#8221;<\/em> dropdown and select <em>&#8220;Vitual Backgrounds&#8221;<\/em> <\/li><\/ul>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" width=\"300\" height=\"236\" src=\"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-content\/uploads\/2025\/04\/video-embed-300x236-2.png\" alt=\"\" class=\"wp-image-7300\"\/><\/figure><\/div>\n\n\n\n<ul><li><strong>Virtual Background Image Library Tool: <\/strong>This tool gives you a list of images for your Virtual Background Image Library if already defined. You need to add External Image URLs in seperate lines in the TEXTAREA.<ul><li>Image URLs must be hosted on &#8220;https&#8221;. Hosting Server must handle CORS issue. If CORS issue is faced, Embed will fail to use the Image. <\/li><li>Maximum allowed Image URL: 10<\/li><li>Maximum Dimension of Image: 600x400px (Prescribed for better performance)<\/li><li>Image Format: JPG, JPEG<\/li><li>Image Size: 200KB (Prescribed for better performance)<\/li><\/ul><\/li><\/ul>\n\n\n\n<a name=\"dynamic-image-lib\"><\/a>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2>Dynamic Image Library using Query String<\/h2>\n\n\n\n<p>Image URL for Virtual Background may also be passed through Query String. So, query string helps you to pass different image URL while embedding for a user. When Query String Parameter is used to define Image Library, it overrides Default Image Library.<\/p>\n\n\n\n<ul><li>Use <code>virtual_bg_imgs=IMG_URL<\/code> as query String parameter. You can use this parameter multiple times in cas eyou want to add more than one image.<\/li><li>Image URLs must be hosted on &#8220;https&#8221;. Hosting Server must handle CORS issue. If CORS issue is faced, Embed will fail to use the Image.<\/li><li>Maximum Dimension of Image: 600x400px (Prescribed for better performance)<\/li><li>Image Format: JPG, JPEG<\/li><li>Image Size: 200KB (Prescribed for better performance)<\/li><\/ul>\n\n\n\n<p><strong>Note:<\/strong><\/p>\n\n\n\n<ul><li>See detailed explanation on&nbsp;<a href=\"\/developer\/video\/low-code-video-embed\/query-string-parameters-video-embed\/#for-embed-premium\">Query String Support for Virtual Background Image Library<\/a>&nbsp;here.<\/li><\/ul>\n\n\n\n<p> <\/p>\n","protected":false},"excerpt":{"rendered":"<p>At a time when nearly everyone is working from home and dialing into meetings, a virtual video background is a way to use a professional backdrop to represent your company, you could add a polished look to your professional meetings. Table of Contents Overview Setup Virtual Background Enable the feature Setup Default Image Library Dynamic Image Library using Query String Overview The Virtual Background feature allows users to blur own&hellip; <\/p>\n","protected":false},"author":1,"featured_media":0,"parent":4887,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ub_ctt_via":""},"featured_image_src":null,"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"featured":false,"featured-large":false},"uagb_author_info":{"display_name":"vcxdevwpadmin","author_link":"https:\/\/doc.smartflomeet.ttns.in\/developer\/author\/vcxdevwpadmin\/"},"uagb_comment_info":0,"uagb_excerpt":"At a time when nearly everyone is working from home and dialing into meetings, a virtual video background is a way to use a professional backdrop to represent your company, you could add a polished look to your professional meetings. Table of Contents Overview Setup Virtual Background Enable the feature Setup Default Image Library Dynamic&hellip;","_links":{"self":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages\/4889"}],"collection":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/comments?post=4889"}],"version-history":[{"count":0,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages\/4889\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages\/4887"}],"wp:attachment":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/media?parent=4889"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}