{"id":4677,"date":"2021-07-21T10:51:41","date_gmt":"2021-07-21T10:51:41","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=4677"},"modified":"2023-02-21T10:17:05","modified_gmt":"2023-02-21T10:17:05","slug":"create-a-video-playlist-popup-advanced","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/create-a-video-playlist-popup-advanced\/","title":{"rendered":"Create a Video Playlist Popup [Advanced]"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"4677\" class=\"elementor elementor-4677\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-437f910d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"437f910d\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-35072f4a\" data-id=\"35072f4a\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-13b98ab8 elementor-widget elementor-widget-video\" data-id=\"13b98ab8\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/lkWeQFgORtg&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-25199a93 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"25199a93\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-211a7478\" data-id=\"211a7478\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4c178af4 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"4c178af4\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1271\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1271\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1272\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1272\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1271\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1271\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1271\" tabindex=\"0\" hidden=\"false\"><p>In this Tips &amp; Tricks tutorial, we\u2019re going to combine popups, widgets and custom CSS code to create amazing interactive sections in Elementor! In this lesson you will learn how to:<\/p><p>\u2713 Add a template shortcode inside of a widget<\/p><p>\u2713 Add custom CSS<\/p><p>\u2713 Create and link to a popup \u2713 And much more!<\/p><p><span class=\"style-scope yt-formatted-string\" dir=\"auto\">Custom CSS used in the tutorial:<\/span><\/p><p><span class=\"style-scope yt-formatted-string\" dir=\"auto\">\/* Adds a border to the image box *\/<\/span><\/p><p><span class=\"style-scope yt-formatted-string\" dir=\"auto\">selector img {<\/span> <span class=\"style-scope yt-formatted-string\" dir=\"auto\">border: 2px solid white;<\/span> <span class=\"style-scope yt-formatted-string\" dir=\"auto\">}<\/span><\/p><p><span class=\"style-scope yt-formatted-string\" dir=\"auto\">\/* Sets the height of the column and allows an infinite scroll *\/<\/span><\/p><p><span class=\"style-scope yt-formatted-string\" dir=\"auto\">selector {<\/span> <span class=\"style-scope yt-formatted-string\" dir=\"auto\">height: 80vh;<\/span> <span class=\"style-scope yt-formatted-string\" dir=\"auto\">overflow-y: scroll;<\/span> <span class=\"style-scope yt-formatted-string\" dir=\"auto\">}<\/span><\/p><p><span class=\"style-scope yt-formatted-string\" dir=\"auto\">\/*\u00a0Allows the video playlist widget video to be displayed on top *\/<\/span><\/p><p><span class=\"style-scope yt-formatted-string\" dir=\"auto\">.elementor-widget-video-playlist .e-tabs-main-area {<\/span> <span class=\"style-scope yt-formatted-string\" dir=\"auto\">flex-direction: column-reverse;<\/span> <span class=\"style-scope yt-formatted-string\" dir=\"auto\">}<\/span><\/p><p><span class=\"style-scope yt-formatted-string\" dir=\"auto\">\/* Ensure the video fills the width of the container *\/<\/span><\/p><p><span class=\"style-scope yt-formatted-string\" dir=\"auto\">.elementor-widget-video-playlist .e-tabs-wrapper {<\/span> <span class=\"style-scope yt-formatted-string\" dir=\"auto\">width: 100%;<\/span> <span class=\"style-scope yt-formatted-string\" dir=\"auto\">}<\/span><\/p><p>\u00a0<\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1272\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1272\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1272\" tabindex=\"0\" hidden=\"hidden\"><p>Hey there, it\u2019s Ash from Elementor.<\/p><p>Today in this tips and tricks tutorial I\u2019ll show you how to combine Elementor features to create this amazing popup playlist.<\/p><p>Elementor gives you everything you need to build a website in just a few clicks. It\u2019s easy to create a simple template using widgets separately, but for more complex designs, we might need a different approach which combines several Elementor features.<\/p><p>In this tutorial we will use a template shortcode to add our unique design inside a widget. We\u2019ll then use a dynamic link to activate a popup containing our video playlist and we\u2019ll learn how to add advanced customisations to our widgets using CSS.1<\/p><p>So if you\u2019re ready, let\u2019s get started!<br \/>We\u2019ll begin in our editor. We have already set up our website to display a variety of music radio categories. In this example we choose the Lo-Fi category which will showcase the top shortlisted online channels.<\/p><p>I&#8217;ll go ahead and delete this tabs widget so we can start building in an empty column.<\/p><p>Then search for&#8230;and drag the tabs widget in our column.<\/p><p>The tab widget is a really great way to help you categorise your content.<br \/>What\u2019s even more awesome is that it allows you to load an entire template inside of it using a shortcode.<\/p><p>Before we explore how to add a template to this widget let\u2019s first give the tab items a name\u2026<\/p><p>And then we\u2019ll amend some styles\u2026<\/p><p>Let\u2019s now save our changes and head to the templates area.<\/p><p>\u00a0<\/p><p>Type CMD\/CTRL + E on your keyboard to bring up the Elementor finder and then search for \u2018templates\u2019&#8230;and select \u2018saved templates\u2019.<\/p><p>Once this page loads now select \u2018add new\u2019.<\/p><p>We\u2019ll select \u2018section\u2019&#8230;name our template file&#8230;and then select \u2018create template\u2019.<br \/>Lets first dismiss the library window&#8230;.and then create a new section which contains one column.<\/p><p>We\u2019ll set the content width to \u2018full-width\u2019&#8230;and switch to the style tab.<\/p><p>Set the background color using our global color choices.<\/p><p>Now select the column&#8230;and in the advanced tab unlink the padding and enter 20px in the top box.<br \/>While Elementor gives you everything you need to build a website without a single line of code, for advanced design ideas, Elementor gives you the ability to add your own CSS which can enhance a template\u2019s look even further.<\/p><p>Let\u2019s first search for&#8230;and drop in an image box widget\u2026<\/p><p>Change the image&#8230;add a title&#8230;and remove the default description.<\/p><p>Switching over to the style tab&#8230;set the width to 65%&#8230;amend the hover animation to \u2018shrink\u2019 and the transition duration to 0.5.<\/p><p>Now expand the content tab&#8230;and amend the typography.<\/p><p>If we now select the advanced tab and go to \u2018positioning\u2019 we can adjust the width of this widget.<\/p><p>Under width, choose custom and set this to 50%. This will allow us to position two image box widgets side by side which is a great technique to adopt as it generates much less code than using an inner section or more columns, ultimately resulting in faster load times.<\/p><p>We\u2019d like to add a border to our image only, so let add some custom CSS to achieve this. Select the Custom CSS tab next and then add the following line of CSS\u2026<\/p><p>If you would like to copy and paste this CSS you&#8217;ll find it in the description of this video.<br \/>If we now right click onto the image box widget and select duplicate, you can see exactly what our positioning settings have achieved.<\/p><p>Lets update this second image box widget&#8230;<br \/>Now that our row is ready, let\u2019s add a divider to give a nice space under our elements.<\/p><p>Search for&#8230;and drop in the divider widget\u2026<\/p><p>Set the to 50%&#8230;and alignment to center.<\/p><p>In the style tab set the color&#8230;and then the gap.<\/p><p>And finally in the advanced tab, unlink the margin values and enter -20px in the top box.<br \/>Now that we\u2019ve created our first row and divider, we can duplicate these to save some time.<\/p><p>First of all open the navigator by typing CMD\/CTRL + i on your keyboard, and to ensure the navigator isn\u2019t blocking your view drag it to the right hand side so it snaps to the edge.<\/p><p>Right click the first image box and select duplicate. Now drag these widget from within the navigator to the bottom. This is a great way to easily move around and organise your widgets, columns and sections.<\/p><p>Do the same for the second image box widget, and then also the divider.<\/p><p>Now update these two widgets with their relevant images and titles.<\/p><p>We\u2019ll now repeat this step several more times to add in all of our radio stations.<\/p><p>Once finished save your changes and publish.<br \/>Great! We have now finished creating our list.<\/p><p>Now let\u2019s explore how to add this template inside our tabs.<\/p><p>Press CMD\/CTRL + e to open the finder and type templates once again.<\/p><p>CMD\/CTRL click templates to open this in a new tab as we\u2019ll be coming back to this template soon.<\/p><p>As you can see our new template is now showing and on the right hand side you will see a column titled \u2018shortcode\u2019. Select this shortcode and copy it.<\/p><p>Let\u2019s now head back to the homepage. We can get there quickly by typing CMD\/CTRL + e on your keyboard and typing \u2018home\u2019.<\/p><p>Select the tabs widget&#8230;open the first item and remove the default text. Now paste in the shortcode.<\/p><p>Update the page and now preview\u2026<\/p><p>As you can see our new template is now showing within our tabbed section. If we scroll down however you\u2019ll see that the entire page scrolls. We\u2019d like our list to scroll and the rest of the content to stay fixed.<\/p><p>Let\u2019s head back to the template file and make that happen.<\/p><p>Select the section which holds this content&#8230;and navigate to the custom css tab location in the advanced section.<\/p><p>Add the following CSS code, and again you can copy and paste this from the video description for ease.<\/p><p>By adding the overflow property we can now add as much content as we like and this section will scroll indefinitely providing a great user experience.<\/p><p>\u00a0<\/p><p>OK, everything is looking and working fantastic so far!<\/p><p>It is now time to add an action so that when a user selects one of our radio stations the video playlist appears.<\/p><p>We\u2019re going to easily create this with a popup.<\/p><p>Navigate to \u2018Templates &gt; Popups\u2019<\/p><p>Add a new popup\u2026.give it a name\u2026and dismiss the library.<br \/>First of all add a new one column section&#8230;switch to the style tab and set the background color.<\/p><p>Now search for and drop in the video playlist widget\u2026<\/p><p>Rename the playlist\u2026and don\u2019t worry that you can\u2019t see this right now, it\u2019s the same color as the background which we\u2019ll fix soon.<\/p><p>Expand the first item and add your video link.<\/p><p>Make good use of the \u2018get video data\u2019 button as it will automatically populate your video title, duration and thumbnail. You can of course amend any of these manually if you need to.<\/p><p>Now expand item 2 and repeat the process\u2026<\/p><p>And then do the same for the remaining videos&#8230;<br \/>OK, that\u2019s all of the videos added, let\u2019s now continue with our customisations and configurations.<\/p><p>Select the image overlay tab, enable this option and then select your image.<\/p><p>With the image overlay enabled we can also amend the play icon.<\/p><p>Now expand the additional options tab. Here you can control the behaviors and further configurations associated with the videos you\u2019re displaying.<\/p><p>\u2018On Load\u2019 will automatically play the video and \u2018Next Up\u2019 will play the videos consecutively.<\/p><p>We\u2019ll remove the thumbnails&#8230;the play and watched icons&#8230;and then enable lazy load.<br \/>Let\u2019s now add some custom CSS in the advanced panel to adjust this widget slightly for our exact requirements.<\/p><p>To save you from having to type out this CSS, we\u2019ve provided it for you in the video description.<\/p><p>Don\u2019t worry that this doesn\u2019t look exactly how we\u2019d like it just yet. Switch to the style tab now and let&#8217;s make this widget look amazing!<br \/>Set the height to 650px\u2026<\/p><p>Amend the top bar background color&#8230;typography&#8230;and video amounts.<\/p><p>Next, set the video item background color&#8230;item color&#8230;item typography&#8230;duration color&#8230;and finally the duration typography.<\/p><p>Now set the active styles..<\/p><p>The item color&#8230;item typography&#8230;and duration typography.<br \/>Select the column next and add a white 2px border.<\/p><p>And then set the padding to 0px on all sides.<br \/>Let\u2019s now amend some settings to the actual popup.<\/p><p>Select the gear icon in the bottom left hand corner.<\/p><p>Switch over to VW and set to 38.<\/p><p>The horizontal position we\u2019ll set to right and the vertical position we\u2019ll set to bottom.<\/p><p>Hide the overlay&#8230;and also the close button.<\/p><p>Now set the entrance animation to SlideInUp and the exit animation to SlideOutDown. Amending these will open the animation duration setting which we\u2019ll set to 0.5.<\/p><p>Now in the advanced tab unlink the margin values and set the right hand side to 50px.<\/p><p>Lets now publish our popup and set its conditions by selecting the \u2018Publish\u2019 button. Choose \u2018Add Condition\u2019 and by default \u2018Entire Site\u2019 is selected. From here we can simply select \u2018Save &amp; Close\u2019.<br \/>Now it\u2019s time to connect everything together and test out our new video playlist popup.<\/p><p>Open the template file first of all&#8230;and select the first image box widget.<\/p><p>In the link field, select the dynamic tags icon.<\/p><p>Scroll down to the Actions section and select popup.<\/p><p>Now select \u2018Popup\u2019 and search for the popup we\u2019ve just created.<\/p><p>Once you\u2019ve found and selected the popup, simply update the template and we\u2019re ready to test it out.<br \/>Open your website now and as you can see by clicking onto the first image the video playlist popup appears and looks fantastic!<\/p><p>We can click the image again, and the playlist then disappears.<\/p><p>We\u2019ve gone ahead and populated the other radio stations and as you can see we can switch between effortlessly providing a great user experience.<br \/>By combining Elementor features like template shortcodes and popups you can create some amazing and interactive website experiences for your users.<\/p><p>Let your imagination run wild, experiment with different combinations and share your websites below so we can all be inspired.<\/p><p>Thank you for watching.\u00a0<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview In this Tips &amp; Tricks tutorial, we\u2019re going to combine popups, widgets and custom CSS code to create amazing interactive sections in Elementor! In this lesson you will learn how to: \u2713 Add a template shortcode inside of a widget \u2713 Add custom CSS \u2713 Create and link to a popup \u2713 [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":4143,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4,30,14,22],"tags":[41],"class_list":["post-4677","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","category-home-featured","category-pop-up","category-trending-now-selection-guides-tutorials","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Create a Video Playlist Popup [Advanced] | Elementor Academy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/academy\/create-a-video-playlist-popup-advanced\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create a Video Playlist Popup [Advanced] | Elementor Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this Tips &amp; Tricks tutorial, we\u2019re going to combine popups, widgets and custom CSS code to create amazing interactive sections in Elementor! In this lesson you will learn how to: \u2713 Add a template shortcode inside of a widget \u2713 Add custom CSS \u2713 Create and link to a popup \u2713 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/create-a-video-playlist-popup-advanced\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-21T10:51:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-21T10:17:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Tips-Tricks-2.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Saar Kedem\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Saar Kedem\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create a Video Playlist Popup [Advanced] | Elementor Academy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/academy\/create-a-video-playlist-popup-advanced\/","og_locale":"en_US","og_type":"article","og_title":"Create a Video Playlist Popup [Advanced] | Elementor Academy","og_description":"Overview Transcript Overview In this Tips &amp; Tricks tutorial, we\u2019re going to combine popups, widgets and custom CSS code to create amazing interactive sections in Elementor! In this lesson you will learn how to: \u2713 Add a template shortcode inside of a widget \u2713 Add custom CSS \u2713 Create and link to a popup \u2713 [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/create-a-video-playlist-popup-advanced\/","og_site_name":"Academy","article_published_time":"2021-07-21T10:51:41+00:00","article_modified_time":"2023-02-21T10:17:05+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Tips-Tricks-2.jpg","type":"image\/jpeg"}],"author":"Saar Kedem","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Saar Kedem"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/create-a-video-playlist-popup-advanced\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/create-a-video-playlist-popup-advanced\/"},"author":{"name":"Saar Kedem","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/7d19eaa5cd2e49e5f8037ec2e985eaf5"},"headline":"Create a Video Playlist Popup [Advanced]","datePublished":"2021-07-21T10:51:41+00:00","dateModified":"2023-02-21T10:17:05+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/create-a-video-playlist-popup-advanced\/"},"wordCount":1910,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/create-a-video-playlist-popup-advanced\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Tips-Tricks-2.jpg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout","home \u2013 featured","Pop Up","trending now selection \u2013 guides and tutorials"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/create-a-video-playlist-popup-advanced\/","url":"https:\/\/elementor.com\/academy\/create-a-video-playlist-popup-advanced\/","name":"Create a Video Playlist Popup [Advanced] | Elementor Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/create-a-video-playlist-popup-advanced\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/create-a-video-playlist-popup-advanced\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Tips-Tricks-2.jpg","datePublished":"2021-07-21T10:51:41+00:00","dateModified":"2023-02-21T10:17:05+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/create-a-video-playlist-popup-advanced\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/create-a-video-playlist-popup-advanced\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/create-a-video-playlist-popup-advanced\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Tips-Tricks-2.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Tips-Tricks-2.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/create-a-video-playlist-popup-advanced\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"Create a Video Playlist Popup [Advanced]"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/7d19eaa5cd2e49e5f8037ec2e985eaf5","name":"Saar Kedem","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1088ed3a6dcab53c172d632030ff97173b1e7adc49cd74d116e0e9d0f43b0d7a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1088ed3a6dcab53c172d632030ff97173b1e7adc49cd74d116e0e9d0f43b0d7a?s=96&d=mm&r=g","caption":"Saar Kedem"},"sameAs":["https:\/\/test.com"],"url":"https:\/\/elementor.com\/academy\/author\/saarkedem\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/4677","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=4677"}],"version-history":[{"count":2,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/4677\/revisions"}],"predecessor-version":[{"id":9616,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/4677\/revisions\/9616"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/4143"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=4677"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=4677"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=4677"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}