{"id":2659,"date":"2021-03-13T16:40:57","date_gmt":"2021-03-13T16:40:57","guid":{"rendered":"https:\/\/wp-tutorials.tech\/?p=2659"},"modified":"2023-10-03T19:10:16","modified_gmt":"2023-10-03T18:10:16","slug":"responsive-video-light-box","status":"publish","type":"post","link":"https:\/\/wp-tutorials.tech\/add-functionality\/responsive-video-light-box\/","title":{"rendered":"Responsive Video Light-box with Lity"},"content":{"rendered":"\n

This tutorial shows you how to make an elegant & responsive video pop-up light-box. Instead of just using the standard WordPress block to embed a video, we’ll use the Lity JavaScript library to pop the video to a fully responsive video player, and it’ll work with YouTube and self-hosted videos.<\/p>\n\n\n\n

You don’t need to add any new plugins to your WordPress site. All you need is a custom child theme<\/a> so we can add a bit of PHP and JavaScript to make it work.<\/p>\n\n\n\n

\n
Video: Hosted on YouTube<\/span>\"A<\/a>
Hosted on YouTube<\/figcaption><\/figure><\/div>\n<\/div>\n\n\n\n
Video: A self-hosted video<\/span>\"A<\/a>
A self-hosted video<\/figcaption><\/figure><\/div>\n<\/div>\n<\/div>\n\n\n\n

Basically, we need a PHP file on the server to implement a custom shortcode<\/a>. We need the open source Lity library (a free download)<\/a> and we need to create a bit of CSS to polish it off. If you’re not experienced at coding, it might sound like hard work, but…<\/p>\n\n\n\n

…all we’re going to do is create a single PHP function, add a couple of CSS definitions, and use the Lity JavaScript library to do all the hard work.<\/p>\n\n\n\n

Getting Started<\/h2>\n\n\n\n

We’ll start by sorting-out our files, and we’ll put a placeholder function in there so we can test things. In your custom child theme’s main folder, create a new file called simple-video-lightbox.php<\/strong> and paste the following into it.<\/p>\n\n\n\n

<?php\n\n\/\/ Block direct access.\ndefined('WPINC') || die();\n\nfunction svl_do_shortcode_video($params) {\n\t\/\/ We'll replace this with the proper code later.\n\treturn '<strong>Light-box in here<\/strong>';\n}\nadd_shortcode('svl_video', 'svl_do_shortcode_video');<\/pre>\n\n\n\n
\n
\n
info<\/span>Our function begins with “svl_<\/strong>“, which stands for “Simple Video Light-Box”.<\/p>\n\n\n\n
We also need a folder where we can add our supporting files, so make a sub-folder in your custom child theme called simple-video-lightbox<\/strong>. Next, go to the Lity website<\/a> and download the current version. Extract the zip file and go into the “dist” (distributable) folder and you’ll see several files. We only need the minified JS & CSS files, so copy lity.min.css<\/strong> and lity.min.js<\/strong> into the new simple-video-lightbox sub-folder.<\/p>\n\n\n\n
Grab a copy of the YouTube play button SVG<\/a> file, save it into the sub-folder, and rename it to youtube-play-button.svg<\/strong>.<\/p>\n\n\n\n
Yoiu’ll also need a standard (non-YouTube) play button. FInd or create an SVG and save it in the subfolder, with the name “standard-play-button.svg<\/strong>“<\/p>\n\n\n\n
Create an empty CSS file in the sub-folder called svl-frontend.css<\/strong>.<\/p>\n\n\n\n
Finally, we need to tell our custom child theme to use the new code, so open your custom child theme’s functions.php<\/strong> file and add the following into it.<\/p>\n<\/div>\n\n\n\n
\n
\"list<\/a>
Asset files for our Simple Video Light-box project<\/figcaption><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n
\/**\n * Simple Video Light-box.\n *\/\nrequire_once dirname(__FILE__) . '\/simple-video-lightbox.php';<\/pre>\n\n\n\n
OK, that should be enough to tell WordPress that we’ve created a new shortcode called svl_video<\/strong>, so let’s see if it works. Edit a page or a post, create a shortcode block and add the new shortcode with a “url” parameter pointing to a YouTube video. Save your content and view it. If everything’s working properly, you should see the text “Light-box in here<\/strong>” rendered when you want your video to be.<\/p>\n\n\n
\n
\"video
Simple Video Light-box shortcode block<\/figcaption><\/figure>\n<\/div>\n\n\n
Render the Shortcode’s HTML<\/h2>\n\n\n\n
Now the “scaffolding” is in place, we can add the code to render the proper HTML. We’re going to create an outer figure<\/code> container, which will wrap a thumbnail\/poster image that we can grab from YouTube (based on the video URL), or we can specify it manually (with the thumb=\"...\"<\/code> parameter). Update your simple-video-lightbox.php<\/strong> file with the following.<\/p>\n\n\n\n
<?php\n\n\/**\n * WP Tutorials : Simple Video Lightbox (svl)\n *\n * https:\/\/wp-tutorials.tech\/add-functionality\/responsive-video-light-box\/\n *\/\n\n\/\/ Block direct access.\ndefined('WPINC') || die();\n\nconst SVL_LITY_VERSION = '2.4.1';\n\nfunction svl_enqueue_assets() {\n\tglobal $svl_have_assets_been_queued;\n\n\tif (is_null($svl_have_assets_been_queued)) {\n\t\t$base_url = get_stylesheet_directory_uri() . '\/' . pathinfo(__FILE__, PATHINFO_FILENAME) . '\/';\n\t\t$theme_version = wp_get_theme()->get('Version');\n\n\t\t\/\/ Lity\n\t\twp_enqueue_style('lity', $base_url . 'lity.min.css', null, SVL_LITY_VERSION);\n\t\twp_enqueue_script('lity', $base_url . 'lity.min.js', null, SVL_LITY_VERSION, true);\n\n\t\t\/\/ Our frontend CSS.\n\t\twp_enqueue_style('svl-frontend', $base_url . 'svl-frontend.css', null, $theme_version);\n\n\t\t$svl_have_assets_been_queued = true;\n\t}\n}\n\nfunction svl_do_shortcode_video($atts) {\n\t$html = '';\n\n\tif (is_admin() || wp_doing_ajax()) {\n\t\t\/\/ Don't do anything.\n\t} else {\n\t\t\/\/ Enqueue the assets.\n\t\tsvl_enqueue_assets();\n\n\t\t\/\/ Parse the arguments passed from the shortcode.\n\t\t$args = shortcode_atts(\n\t\t\tarray(\n\t\t\t\t'url' => '',\n\t\t\t\t'thumb' => '',\n\t\t\t\t'alt' => 'A video',\n\t\t\t\t'w' => 400,\n\t\t\t\t'h' => 300,\n\t\t\t\t'caption' => '',\n\t\t\t),\n\t\t\t$atts\n\t\t);\n\n\t\tif (empty($args['alt']) && !empty($args['caption'])) {\n\t\t\t$args['alt'] = $args['caption'];\n\t\t}\n\n\t\t$video_url = null;\n\t\t$css_classes = array('svl-container');\n\n\t\tif (empty($video_url = $args['url'])) {\n\t\t\t\/\/ No video URL specified.\n\t\t} elseif (strpos($video_url, 'youtube.com') === false) {\n\t\t\t\/\/ Non-YouTube video, possibly self-hosted.\n\t\t} else {\n\t\t\t\/\/ We have a YouTube video URL, so parse the URL to grab the video\n\t\t\t\/\/ reference (v=xxxxxx) and maybe try to get the post JPEG for the\n\t\t\t\/\/ video too.\n\t\t\t$youtube_video_ref = null;\n\t\t\t$css_classes[] = 'youtube';\n\n\t\t\tif (!empty($args['thumb'])) {\n\t\t\t\t\/\/ We've set the thumbnail\/poster in the \"thumb\" arg, so we\n\t\t\t\t\/\/ don't need to fetch the poster from YouTube.\n\t\t\t} else {\n\t\t\t\t$url_parts = parse_url($video_url);\n\n\t\t\t\t$query_args = null;\n\t\t\t\tif (is_array($url_parts) && array_key_exists('query', $url_parts)) {\n\t\t\t\t\tparse_str($url_parts['query'], $query_args);\n\t\t\t\t}\n\n\t\t\t\tif (is_array($query_args) && array_key_exists('v', $query_args) && !empty($query_args['v'])) {\n\t\t\t\t\t$youtube_video_ref = $query_args['v'];\n\t\t\t\t}\n\n\t\t\t\tif (!empty($youtube_video_ref)) {\n\t\t\t\t\t\/\/ Point the thumbnail\/poster to YouTube,\n\t\t\t\t\t$args['thumb'] = sprintf(\n\t\t\t\t\t\t'https:\/\/img.youtube.com\/vi\/%s\/0.jpg',\n\t\t\t\t\t\t$youtube_video_ref\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t\/\/ If we've got a valid video URL, render the HTML.\n\t\tif (empty($video_url)) {\n\t\t\t\/\/ No video ref found, so do nothing.\n\t\t\t$html .= '<p>ERROR: No video_url<\/p>';\n\t\t} else {\n\t\t\t$html .= sprintf('<figure class=\"%s\">', esc_attr(implode(' ', $css_classes)));\n\n\t\t\t$html .= sprintf('<a href=\"%s\" title=\"%s\" data-lity>', esc_url($video_url), esc_attr($args['alt']));\n\n\t\t\t\/\/ The thumbnail \/ poster image.\n\t\t\t$html .= sprintf(\n\t\t\t\t'<img src=\"%s\" width=\"%d\" height=\"%d\" alt=\"%s\" \/>',\n\t\t\t\tesc_url($args['thumb']),\n\t\t\t\t$args['w'],\n\t\t\t\t$args['h'],\n\t\t\t\tesc_attr($args['alt'])\n\t\t\t);\n\n\t\t\t$html .= '<\/a>';\n\n\t\t\tif (!empty($args['caption'])) {\n\t\t\t\t\/\/ For SEO and the screen-reader.\n\t\t\t\t$html .= sprintf('<span class=\"screen-reader-text\">Video: %s<\/span>', esc_html($args['caption']));\n\n\t\t\t\t\/\/ The on-screen caption\n\t\t\t\t$html .= sprintf('<figcaption>%s<\/figcaption>', esc_html($args['caption']));\n\t\t\t}\n\n\t\t\t$html .= '<\/figure>'; \/\/ .svl-container\n\t\t}\n\t}\n\n\treturn $html;\n}\nadd_shortcode('svl_video', 'svl_do_shortcode_video');<\/pre>\n\n\n\n
This might seem like a bit of a chunk but it breaks-down quite nicely, and there are loads of comments too. The parameters for our shortcode come through in $atts<\/code> so we need to pull the video URL, and possibly an SEO-friendly image alt tag<\/a> for our thumbnail image.<\/p>\n\n\n\n
    \n
  1. Parse $atts<\/code> to grab the shortcode’s parameters.<\/li>\n\n\n\n
  2. Enqueue the CSS\/JS for Lity, along with our own CSS.<\/li>\n\n\n\n
  3. If we’ve specified a video URL with “youtube.com” in it, and we have not specified a thumbnail URL…\n
      \n
    1. Try to auto-create a thumbnail image URL based on the YouTube video URL.<\/li>\n<\/ol>\n<\/li>\n\n\n\n
    2. If the shortcode hasn’t specified a video URL…\n
        \n
      1. Output an error message.<\/li>\n<\/ol>\n<\/li>\n\n\n\n
      2. Else…\n
          \n
        1. Open the <figure><\/code> element.<\/li>\n\n\n\n
        2. Open the <a><\/code> for Lity.<\/li>\n\n\n\n
        3. If a caption has been specified…\n
            \n
          1. Output it in a special screen reader <span> element – good for SEO too.<\/li>\n<\/ol>\n<\/li>\n\n\n\n
          2. Render the <img><\/code> for the thumbnail\/poster.<\/li>\n\n\n\n
          3. If a caption has been specified…\n
              \n
            1. Render a <figcaption><\/code><\/li>\n<\/ol>\n<\/li>\n\n\n\n
            2. Close-off the <figure><\/code> element.<\/li>\n<\/ol>\n<\/li>\n\n\n\n
            3. Return $html<\/code> so WordPress can render it for us.<\/li>\n<\/ol>\n\n\n\n
              That should be enough to “make it work”. Save your changes, reload your content and you should see your video thumbnail. Click on it – it should open the video light-box and play \ud83d\ude0e<\/p>\n\n\n\n
              What if it Didn’t Work…<\/h3>\n\n\n\n
                \n
              • If it’s a YouTube URL but you don’t see a video thumbnail, check your YouTube URL is correct and that the video reference is specified with “v=xxxxxxxxxx”<\/li>\n\n\n\n
              • The thumbnail shows OK, but clicking on it takes you to the YouTube page instead of showing the pop-out light-box.\n
                  \n
                • Check your browser’s JavaScript console to see if it was unable to load the lity.min.js file for some reason.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
                  Adding Some Style<\/h2>\n\n\n\n
                  We’ve now got a working shortcode for playing YouTube videos, but it’s not obvious that the image is a video – it just looks like an image. So let’s put a Play button over the image with some CSS. Paste the following into your svl-frontend.css<\/strong> file..<\/p>\n\n\n\n
                  \/**\n * Simple Video Light-box\n *\n * https:\/\/wp-tutorials.tech\/add-functionality\/responsive-video-light-box\/\n *\/\n\n.svl-container {\n\tposition:  relative;\n\tmargin-bottom:  1em;\n}\n\n.svl-container > a {\n\tdisplay:  block;\n\tborder:  1px solid lightgrey;\n\tbox-shadow: 0 0 1.00em rgba( 0, 0, 0, 0.20 );\n\tborder-radius:  0.35em;\n\toverflow: hidden;\n}\n\n.svl-container > a:hover {\n\tbox-shadow: 0 0 1.00em rgba( 0, 0, 0, 0.40 );\n}\n\n.svl-container > a img {\n\tdisplay:  block;\n\twidth:  100%;\n\tobject-fit:  cover;\n}\n\n.svl-container > a::before {\n\tcontent: url( 'standard-play-button.svg' );\n\tposition:  absolute;\n\tleft:  50%;\n\ttop:  50%;\n\twidth:  25%;\n\tmax-width:  5em;\n\ttransform: translate(-50%, -50%);\n\ttransition: 0.3s;\n\topacity: 0.85;\n\tz-index:  10;\n}\n\n.svl-container.youtube > a::before {\n\tcontent: url( 'youtube-play-button.svg' );\n}\n\n.svl-container > a:hover::before {\n\topacity: 1.00;\n}\n\n.svl-container figcaption {\n\ttext-align: center;\n\tposition:  absolute;\n\tbottom:  0;\n\twidth:  100%;\n\tpadding: 0.5em 0;\n\tcolor:  white;\n\tbackground-color:  #444444c0;\n\tpointer-events: none;\n}\n<\/pre>\n\n\n\n
                  The CSS is pretty straightforward – easy to hack it about to suit your needs.<\/p>\n\n\n\n
                  Wrapping it Up<\/h2>\n\n\n\n
                  I think it’s nicer to have videos embedded like this, rather than with the oEmbed YouTube stuff, because it avoids using an iFrame. iFrames were a bad idea back in the 2000s, and they’re still a bad idea now. So there.<\/p>\n\n\n\n
                  Now that you’ve got 100% control of the HTML, you can really milk it for SEO. Try extending this code a bit …<\/p>\n\n\n\n
                    \n
                  • Set the aria-label property of the <a><\/code> element for better accessibility.<\/li>\n\n\n\n
                  • Sprinkle some custom JavaScript mojo over it to render some cool mouse-over effects.<\/li>\n\n\n\n
                  • Check out the Lity website for more info too, because it’s not just limited to showing videos.<\/li>\n<\/ul>\n\n\n\n
                    Have fun adding video thumbnails all over your WordPress site! \ud83d\udc4d<\/p>\n","protected":false},"excerpt":{"rendered":"
                    This tutorial shows you how to use the Lity JavaScript library to make an elegant & responsive YouTube video pop-up light-box.<\/p>\n","protected":false},"author":1,"featured_media":2661,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"iawp_total_views":544,"footnotes":""},"categories":[36],"tags":[49,40],"class_list":["post-2659","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-add-functionality","tag-light-box","tag-shortcode","masonry-post","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-33","no-featured-image-padding"],"acf":[],"yoast_head":"\nResponsive Video Light-box with Lity - Headwall WP Tutorials<\/title>\n<meta name=\"description\" content=\"This tutorial shows you how to use the Lity JavaScript library to make an elegant & responsive YouTube & self-hosted video pop-up light-box.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wp-tutorials.tech\/add-functionality\/responsive-video-light-box\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Responsive Video Light-box with Lity - Headwall WP Tutorials\" \/>\n<meta property=\"og:description\" content=\"This tutorial shows you how to use the Lity JavaScript library to make an elegant & responsive YouTube & self-hosted video pop-up light-box.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wp-tutorials.tech\/add-functionality\/responsive-video-light-box\/\" \/>\n<meta property=\"og:site_name\" content=\"Headwall WP Tutorials\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/headwallhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-03-13T16:40:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-03T18:10:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wp-tutorials.tech\/wp-content\/uploads\/2021\/03\/youtube-on-a-phone-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1706\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"headwall\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@headwall\" \/>\n<meta name=\"twitter:site\" content=\"@HeadwallHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"headwall\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"TechArticle\",\"@id\":\"https:\\\/\\\/wp-tutorials.tech\\\/add-functionality\\\/responsive-video-light-box\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wp-tutorials.tech\\\/add-functionality\\\/responsive-video-light-box\\\/\"},\"author\":{\"name\":\"headwall\",\"@id\":\"https:\\\/\\\/wp-tutorials.tech\\\/#\\\/schema\\\/person\\\/567442e9250f58ba41a61bbfc1411622\"},\"headline\":\"Responsive Video Light-box with Lity\",\"datePublished\":\"2021-03-13T16:40:57+00:00\",\"dateModified\":\"2023-10-03T18:10:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/wp-tutorials.tech\\\/add-functionality\\\/responsive-video-light-box\\\/\"},\"wordCount\":1072,\"commentCount\":7,\"publisher\":{\"@id\":\"https:\\\/\\\/wp-tutorials.tech\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/wp-tutorials.tech\\\/add-functionality\\\/responsive-video-light-box\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wp-tutorials.tech\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/youtube-on-a-phone-scaled.jpg\",\"keywords\":[\"light-box\",\"Shortcodes\"],\"articleSection\":[\"Extend WordPress\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/wp-tutorials.tech\\\/add-functionality\\\/responsive-video-light-box\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/wp-tutorials.tech\\\/add-functionality\\\/responsive-video-light-box\\\/\",\"url\":\"https:\\\/\\\/wp-tutorials.tech\\\/add-functionality\\\/responsive-video-light-box\\\/\",\"name\":\"Responsive Video Light-box with Lity - Headwall WP Tutorials\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wp-tutorials.tech\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/wp-tutorials.tech\\\/add-functionality\\\/responsive-video-light-box\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/wp-tutorials.tech\\\/add-functionality\\\/responsive-video-light-box\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wp-tutorials.tech\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/youtube-on-a-phone-scaled.jpg\",\"datePublished\":\"2021-03-13T16:40:57+00:00\",\"dateModified\":\"2023-10-03T18:10:16+00:00\",\"description\":\"This tutorial shows you how to use the Lity JavaScript library to make an elegant & responsive YouTube & self-hosted video pop-up light-box.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/wp-tutorials.tech\\\/add-functionality\\\/responsive-video-light-box\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/wp-tutorials.tech\\\/add-functionality\\\/responsive-video-light-box\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/wp-tutorials.tech\\\/add-functionality\\\/responsive-video-light-box\\\/#primaryimage\",\"url\":\"https:\\\/\\\/wp-tutorials.tech\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/youtube-on-a-phone-scaled.jpg\",\"contentUrl\":\"https:\\\/\\\/wp-tutorials.tech\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/youtube-on-a-phone-scaled.jpg\",\"width\":2560,\"height\":1706,\"caption\":\"YouTube on a phone\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/wp-tutorials.tech\\\/add-functionality\\\/responsive-video-light-box\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/wp-tutorials.tech\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Extend WordPress\",\"item\":\"https:\\\/\\\/wp-tutorials.tech\\\/category\\\/add-functionality\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Responsive Video Light-box with Lity\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/wp-tutorials.tech\\\/#website\",\"url\":\"https:\\\/\\\/wp-tutorials.tech\\\/\",\"name\":\"Headwall WP Tutorials\",\"description\":\"Practical WordPress Tutorials\",\"publisher\":{\"@id\":\"https:\\\/\\\/wp-tutorials.tech\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/wp-tutorials.tech\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/wp-tutorials.tech\\\/#organization\",\"name\":\"Headwall WordPress Tutorials\",\"url\":\"https:\\\/\\\/wp-tutorials.tech\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/wp-tutorials.tech\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/wp-tutorials.tech\\\/wp-content\\\/uploads\\\/2021\\\/12\\\/headwall-wp-tutorials-logo-retina.png\",\"contentUrl\":\"https:\\\/\\\/wp-tutorials.tech\\\/wp-content\\\/uploads\\\/2021\\\/12\\\/headwall-wp-tutorials-logo-retina.png\",\"width\":1640,\"height\":512,\"caption\":\"Headwall WordPress Tutorials\"},\"image\":{\"@id\":\"https:\\\/\\\/wp-tutorials.tech\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/headwallhosting\\\/\",\"https:\\\/\\\/x.com\\\/HeadwallHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/wp-tutorials.tech\\\/#\\\/schema\\\/person\\\/567442e9250f58ba41a61bbfc1411622\",\"name\":\"headwall\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6106bc5e3abccd66f196d133fa692d0c6c53cc2cac1b58528c510ee8de9e791e?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6106bc5e3abccd66f196d133fa692d0c6c53cc2cac1b58528c510ee8de9e791e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6106bc5e3abccd66f196d133fa692d0c6c53cc2cac1b58528c510ee8de9e791e?s=96&d=mm&r=g\",\"caption\":\"headwall\"},\"sameAs\":[\"https:\\\/\\\/headwall-hosting.com\\\/\",\"https:\\\/\\\/x.com\\\/headwall\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Responsive Video Light-box with Lity - Headwall WP Tutorials","description":"This tutorial shows you how to use the Lity JavaScript library to make an elegant & responsive YouTube & self-hosted video pop-up light-box.","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:\/\/wp-tutorials.tech\/add-functionality\/responsive-video-light-box\/","og_locale":"en_GB","og_type":"article","og_title":"Responsive Video Light-box with Lity - Headwall WP Tutorials","og_description":"This tutorial shows you how to use the Lity JavaScript library to make an elegant & responsive YouTube & self-hosted video pop-up light-box.","og_url":"https:\/\/wp-tutorials.tech\/add-functionality\/responsive-video-light-box\/","og_site_name":"Headwall WP Tutorials","article_publisher":"https:\/\/www.facebook.com\/headwallhosting\/","article_published_time":"2021-03-13T16:40:57+00:00","article_modified_time":"2023-10-03T18:10:16+00:00","og_image":[{"width":2560,"height":1706,"url":"https:\/\/wp-tutorials.tech\/wp-content\/uploads\/2021\/03\/youtube-on-a-phone-scaled.jpg","type":"image\/jpeg"}],"author":"headwall","twitter_card":"summary_large_image","twitter_creator":"@headwall","twitter_site":"@HeadwallHosting","twitter_misc":{"Written by":"headwall","Estimated reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"TechArticle","@id":"https:\/\/wp-tutorials.tech\/add-functionality\/responsive-video-light-box\/#article","isPartOf":{"@id":"https:\/\/wp-tutorials.tech\/add-functionality\/responsive-video-light-box\/"},"author":{"name":"headwall","@id":"https:\/\/wp-tutorials.tech\/#\/schema\/person\/567442e9250f58ba41a61bbfc1411622"},"headline":"Responsive Video Light-box with Lity","datePublished":"2021-03-13T16:40:57+00:00","dateModified":"2023-10-03T18:10:16+00:00","mainEntityOfPage":{"@id":"https:\/\/wp-tutorials.tech\/add-functionality\/responsive-video-light-box\/"},"wordCount":1072,"commentCount":7,"publisher":{"@id":"https:\/\/wp-tutorials.tech\/#organization"},"image":{"@id":"https:\/\/wp-tutorials.tech\/add-functionality\/responsive-video-light-box\/#primaryimage"},"thumbnailUrl":"https:\/\/wp-tutorials.tech\/wp-content\/uploads\/2021\/03\/youtube-on-a-phone-scaled.jpg","keywords":["light-box","Shortcodes"],"articleSection":["Extend WordPress"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/wp-tutorials.tech\/add-functionality\/responsive-video-light-box\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/wp-tutorials.tech\/add-functionality\/responsive-video-light-box\/","url":"https:\/\/wp-tutorials.tech\/add-functionality\/responsive-video-light-box\/","name":"Responsive Video Light-box with Lity - Headwall WP Tutorials","isPartOf":{"@id":"https:\/\/wp-tutorials.tech\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wp-tutorials.tech\/add-functionality\/responsive-video-light-box\/#primaryimage"},"image":{"@id":"https:\/\/wp-tutorials.tech\/add-functionality\/responsive-video-light-box\/#primaryimage"},"thumbnailUrl":"https:\/\/wp-tutorials.tech\/wp-content\/uploads\/2021\/03\/youtube-on-a-phone-scaled.jpg","datePublished":"2021-03-13T16:40:57+00:00","dateModified":"2023-10-03T18:10:16+00:00","description":"This tutorial shows you how to use the Lity JavaScript library to make an elegant & responsive YouTube & self-hosted video pop-up light-box.","breadcrumb":{"@id":"https:\/\/wp-tutorials.tech\/add-functionality\/responsive-video-light-box\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wp-tutorials.tech\/add-functionality\/responsive-video-light-box\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/wp-tutorials.tech\/add-functionality\/responsive-video-light-box\/#primaryimage","url":"https:\/\/wp-tutorials.tech\/wp-content\/uploads\/2021\/03\/youtube-on-a-phone-scaled.jpg","contentUrl":"https:\/\/wp-tutorials.tech\/wp-content\/uploads\/2021\/03\/youtube-on-a-phone-scaled.jpg","width":2560,"height":1706,"caption":"YouTube on a phone"},{"@type":"BreadcrumbList","@id":"https:\/\/wp-tutorials.tech\/add-functionality\/responsive-video-light-box\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wp-tutorials.tech\/"},{"@type":"ListItem","position":2,"name":"Extend WordPress","item":"https:\/\/wp-tutorials.tech\/category\/add-functionality\/"},{"@type":"ListItem","position":3,"name":"Responsive Video Light-box with Lity"}]},{"@type":"WebSite","@id":"https:\/\/wp-tutorials.tech\/#website","url":"https:\/\/wp-tutorials.tech\/","name":"Headwall WP Tutorials","description":"Practical WordPress Tutorials","publisher":{"@id":"https:\/\/wp-tutorials.tech\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wp-tutorials.tech\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/wp-tutorials.tech\/#organization","name":"Headwall WordPress Tutorials","url":"https:\/\/wp-tutorials.tech\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/wp-tutorials.tech\/#\/schema\/logo\/image\/","url":"https:\/\/wp-tutorials.tech\/wp-content\/uploads\/2021\/12\/headwall-wp-tutorials-logo-retina.png","contentUrl":"https:\/\/wp-tutorials.tech\/wp-content\/uploads\/2021\/12\/headwall-wp-tutorials-logo-retina.png","width":1640,"height":512,"caption":"Headwall WordPress Tutorials"},"image":{"@id":"https:\/\/wp-tutorials.tech\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/headwallhosting\/","https:\/\/x.com\/HeadwallHosting"]},{"@type":"Person","@id":"https:\/\/wp-tutorials.tech\/#\/schema\/person\/567442e9250f58ba41a61bbfc1411622","name":"headwall","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/6106bc5e3abccd66f196d133fa692d0c6c53cc2cac1b58528c510ee8de9e791e?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/6106bc5e3abccd66f196d133fa692d0c6c53cc2cac1b58528c510ee8de9e791e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6106bc5e3abccd66f196d133fa692d0c6c53cc2cac1b58528c510ee8de9e791e?s=96&d=mm&r=g","caption":"headwall"},"sameAs":["https:\/\/headwall-hosting.com\/","https:\/\/x.com\/headwall"]}]}},"_links":{"self":[{"href":"https:\/\/wp-tutorials.tech\/wp-json\/wp\/v2\/posts\/2659","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp-tutorials.tech\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wp-tutorials.tech\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wp-tutorials.tech\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wp-tutorials.tech\/wp-json\/wp\/v2\/comments?post=2659"}],"version-history":[{"count":0,"href":"https:\/\/wp-tutorials.tech\/wp-json\/wp\/v2\/posts\/2659\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wp-tutorials.tech\/wp-json\/wp\/v2\/media\/2661"}],"wp:attachment":[{"href":"https:\/\/wp-tutorials.tech\/wp-json\/wp\/v2\/media?parent=2659"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp-tutorials.tech\/wp-json\/wp\/v2\/categories?post=2659"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp-tutorials.tech\/wp-json\/wp\/v2\/tags?post=2659"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}