{"id":1641,"date":"2023-05-16T09:49:37","date_gmt":"2023-05-16T01:49:37","guid":{"rendered":"https:\/\/leadsleap.com\/blog\/?p=1641"},"modified":"2023-10-03T13:21:29","modified_gmt":"2023-10-03T05:21:29","slug":"add-popup-video-to-page","status":"publish","type":"post","link":"https:\/\/leadsleap.com\/blog\/add-popup-video-to-page\/","title":{"rendered":"Page Update &#8211; Add popup video to Page"},"content":{"rendered":"\n<p>Have you thought of showing a popup video on your LL Page?<\/p>\n\n\n\n<p>Possible applications include:<\/p>\n\n\n\n<ol><li>An page with video instructions.<br>Instead of showing all the videos on the page, which will take up a lot of space and slow down the loading speed, you&#8217;ll add a thumbnail image of the video and show the video in a popup when the image is clicked.<\/li><li>A page with video testimonials.<br>Similarly, you want to show the videos in a popup.<\/li><\/ol>\n\n\n\n<p>See the example below:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay controls loop muted src=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2023\/05\/popvideosample.mp4\"><\/video><\/figure>\n\n\n\n<p>Without further ado, let&#8217;s see how to do that using <a rel=\"noreferrer noopener\" href=\"https:\/\/leadsleap.com\/pagebuilder\/\" target=\"_blank\">LeadsLeap Page Builder<\/a>.<\/p>\n\n\n\n<h2>How To Add Popup Video (Step By Step)<\/h2>\n\n\n\n<p>1) Add an image element. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" src=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2023\/05\/0.jpg\" alt=\"\" class=\"wp-image-1649\" width=\"390\" height=\"65\" srcset=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2023\/05\/0.jpg 526w, https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2023\/05\/0-300x50.jpg 300w\" sizes=\"(max-width: 390px) 100vw, 390px\" \/><\/figure>\n\n\n\n<p>This is not a new function. If you are a new member with no experience in using our Page Builder, you should first go through the tutorials in the <a rel=\"noreferrer noopener\" href=\"https:\/\/leadsleap.com\/members\/page.manager.php\" target=\"_blank\">Page Manager<\/a>.<\/p>\n\n\n\n<p>Tip: The image you add should look like a video (see arrow 1 below). This will encourage the visitors to click and watch.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"862\" height=\"394\" src=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2023\/05\/1.jpg\" alt=\"\" class=\"wp-image-1650\" srcset=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2023\/05\/1.jpg 862w, https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2023\/05\/1-300x137.jpg 300w, https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2023\/05\/1-768x351.jpg 768w\" sizes=\"(max-width: 862px) 100vw, 862px\" \/><\/figure>\n\n\n\n<p>2) In the Image Editor, click the &#8216;<strong>On Click<\/strong>&#8216; selector (arrow 2).<\/p>\n\n\n\n<p>3) Select &#8216;<strong>show a video<\/strong>&#8216; (arrow 3).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" src=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2023\/05\/2.jpg\" alt=\"\" class=\"wp-image-1651\" width=\"336\" height=\"168\" srcset=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2023\/05\/2.jpg 415w, https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2023\/05\/2-300x150.jpg 300w\" sizes=\"(max-width: 336px) 100vw, 336px\" \/><\/figure>\n\n\n\n<p>4) Assuming your video is a Youtube video, click the &#8216;<strong>Youtube<\/strong>&#8216; button (arrow 4) to insert a sample Youtube code.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" src=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2023\/05\/3.jpg\" alt=\"\" class=\"wp-image-1652\" width=\"333\" height=\"243\" srcset=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2023\/05\/3.jpg 407w, https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2023\/05\/3-300x219.jpg 300w\" sizes=\"(max-width: 333px) 100vw, 333px\" \/><\/figure>\n\n\n\n<p>5) Replace the sample ID with your Youtube video ID.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" src=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2023\/05\/4.jpg\" alt=\"\" class=\"wp-image-1653\" width=\"540\" height=\"265\" srcset=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2023\/05\/4.jpg 645w, https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2023\/05\/4-300x147.jpg 300w\" sizes=\"(max-width: 540px) 100vw, 540px\" \/><\/figure>\n\n\n\n<p>If you do not know how to get your Youtube video ID, ask Google. (Answer below.)<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"885\" height=\"361\" src=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2023\/05\/8.jpg\" alt=\"\" class=\"wp-image-1670\" srcset=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2023\/05\/8.jpg 885w, https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2023\/05\/8-300x122.jpg 300w, https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2023\/05\/8-768x313.jpg 768w\" sizes=\"(max-width: 885px) 100vw, 885px\" \/><\/figure>\n\n\n\n<p>6) Click &#8216;<strong>Save<\/strong>&#8216; when done.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" src=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2023\/05\/6.jpg\" alt=\"\" class=\"wp-image-1654\" width=\"527\" height=\"88\" srcset=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2023\/05\/6.jpg 623w, https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2023\/05\/6-300x50.jpg 300w\" sizes=\"(max-width: 527px) 100vw, 527px\" \/><\/figure>\n\n\n\n<p>That&#8217;s all.<\/p>\n\n\n\n<h2>Elements That Support Video Popup<\/h2>\n\n\n\n<p>Video popup function is available in the following elements:<\/p>\n\n\n\n<ol><li>Image<\/li><li>Button<\/li><li>Icon<\/li><\/ol>\n\n\n\n<p>This means other than an image, you can also show a popup video when visitors click on a button or an icon. The setup process is similar to that for an image element.<\/p>\n\n\n\n<p>Give this function a try. Let me know what you think in the comments section below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Have you thought of showing a popup video on your LL Page? Possible applications include: An page with video instructions.Instead of showing all the videos on the page, which will take up a lot of space and slow down the loading speed, you&#8217;ll add a thumbnail image of the video and show the video in [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[237],"tags":[],"_links":{"self":[{"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/posts\/1641"}],"collection":[{"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/comments?post=1641"}],"version-history":[{"count":33,"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/posts\/1641\/revisions"}],"predecessor-version":[{"id":1716,"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/posts\/1641\/revisions\/1716"}],"wp:attachment":[{"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/media?parent=1641"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/categories?post=1641"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/tags?post=1641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}