Embed Plus for YouTube Gallery, Livestream and Lazy Loading with Facades vs Youtube Playlist Thumbs

A multi-featured plugin to embed YouTube in WordPress. Use this plugin to embed and customize a YouTube gallery (channel or playlist), YouTube livestream (and premiere), YouTube short, or standard YouTube video. This plugin for YouTube can be customized in a wide variety of ways. The plugin also focuses on performance with the ability to lazy load with a facade and defer JavaScript while serving minified CSS and JavaScript. Here are a few recently added features to all versions (free and Pro) of this plugin: YouTube gallery embeds and standard videos now support Facade Mode which improves plugin performance by loading a lighter version of the player, until it is clicked. The plugin then loads the real YouTube embed after clicking (note: for live streams, the real player is always loaded). We have tested this feature in multiple cases with a mix of other WordPress plugins, and we found it to successfully improve your Lighthouse performance score by addressing the following recommendation: “Some third-party resources can be lazy loaded with a facade – 1 facade alternative available.” You can demo this facade feature on our Embed Plus for YouTube Plugin WordPress test site. Defer critical and non critical JavaScript – improve the initial load time of your pages by allowing this plugin’s critical and non critical Javascript code to begin execution only after a page is loaded. That reasoning is the basis for the Defer CSS Javascript (styles and code) recommendation you’ll see in various web profiling tools. We plan to add a plugin feature that will defer critical and non critical CSS in the future. Compatible with the WordPress Gutenberg block editor (it also stays backwards-compatible with the classic editor WordPress plugin). Both the Gutenberg block selector and the Gutenberg classic block will show the wizard button. For the Gutenberg block selector, click on the (+) sign for the block editor list. The EmbedPlus for YouTube Wizard block is located under the “Embeds” category (make sure you choose “YouTube Wizard“). See more on how to embed a YouTube video, gallery, or livestream with the WordPress Gutenberg block editor here >> The plugin is also compatible with several popular page builders like Elementor, Beaver Builder, SiteOrigin, and Visual Composer. For these and pretty much any other page builder with a short code widget, you can also embed your video, gallery, live stream, or premiere by creating the short code in the plugin’s wizard and then embedding the code in the page builder’s short code widget or text widget. Privacy and Consent – Improved privacy and GDPR compliance options like YouTube no cookie, YouTube API restrictions, and a customizable GDPR consent message. Note: if you have a full-blown consent plugin installed on your WordPress site, you may not need these particular features of this YouTube plugin. YouTube gallery capability: channel and playlist – The ability to make playlist and channel embeds have a gallery layout. By default, the plugin can generate a grid-based responsive playlist or channel gallery >>. Your visitors can browse through pages of video thumbnails and choose from videos that are pulled from an entire YouTube channel or playlist. YouTube gallery auto continuous play – embed a playlist or channel gallery and allow it to play one video after the next without requiring viewers to click a thumbnail. YouTube Premieres – The plugin provides you the same embedding methods for YouTube live streams as it does for premiere embeds. Simultaneous playback control – you can enable/disable the ability for visitors to have separate videos running at the same time on the same page. This also works with YouTube livestream and gallery embeds that are embedded by our YouTube plugin. Improved accessibility by using title attributes for screen reader support. Hopefully this plugin can help your site pass functional accessibility evaluations (FAE). Improved AJAX WordPress theme support. Site origin information with each embed code as an extra security measure. In YouTube’s/Google’s own words, checking this option “protects against malicious third-party JavaScript being injected into your page and hijacking control of your YouTube player.” We especially recommend checking it as it adds higher security than the built-in YouTube embedding method that comes with the current version of WordPress (i.e. oembed). Easy “Insert” button for both the Visual and Text mode of the editor (for YouTube gallery and live stream embedding as well). Embed an entire YouTube channel as a (non-gallery, single embedded player) playlist. Start video settings for playlist embeds. You can now choose to start a playlist with a specific video or have the plugin automatically start with the most recently added video. Note: If you’re embedding a YouTube gallery, the order will be defined by the order of the channel or playlist on YouTube.com. Volume level initialization – helpful when autoplay is checked. Applies to all videos embedded with this YouTube plugin. iOS playback preferences. Automatic localization/internationalization so you can set the player’s interface language from English to another. Instant HTTPS support. It can even convert past non-HTTPS videos to HTTPS. Did you know that Google uses HTTPS/SSL support as a ranking signal for SERP? “At a Glance” direct access to your YouTube posts/pages. Shortcode support for embedding multiple videos on one line. General playlist embedding support. Migration support for other YouTube plugins for WordPress – allows you convert other YouTube plugin embeds to ours Click the Download button to start exploring this plugin for YouTube, or take a look at some more introductory details below. This plugin helps you easily manage the growing complexity of YouTube embedding. It provides a spectrum of basic and advanced features of the YouTube embedded player and will have you posting videos in seconds after installing it. The settings page has plenty of default options that you can automatically apply to your embedded YouTube video, gallery, and/or live stream: Turn on/off all annotations by default Automatically center all your videos Automatically start playing your videos Autohide controls until hovering Loop your videos Show/hide related videos at the end Show/hide the video title and other info (YouTube/Google has deprecated this feature) Use the light theme Show/hide player controls Turn on/off closed captions by default Make your video, gallery, or live stream responsive so that it dynamically fits in all screen sizes (smart phone, PC and tablet) Customizations can be also made to each YouTube embed by adding more to the link as shown below. Adding these will override the above global defaults that you set. Want a visual customizer wizard instead? Go Pro here (more info in the next section): width – Sets the width of your player. If omitted, the default width will be the width of your theme’s content. Example: "https://www.youtube.com/watch?v=quwebVjAEJA&width=500&height=350" height – Sets the height of your player. If omitted, this will be calculated for you automatically. Example: "https://www.youtube.com/watch?v=quwebVjAEJA&width=500&height=350" autoplay – Set this to 1 to autoplay the video (or 0 to play the video once). Example: "https://www.youtube.com/watch?v=quwebVjAEJA&autoplay=1" cc_load_policy – Set this to 1 to turn on closed captioning (or 0 to leave them off). Example: "https://www.youtube.com/watch?v=quwebVjAEJA&cc_load_policy=1" iv_load_policy – Set this to 3 to turn off annotations (or 1 to show them). Example: "https://www.youtube.com/watch?v=quwebVjAEJA&iv_load_policy=3" loop – Set this to 1 to loop the video (or 0 to not loop). Example: "https://www.youtube.com/watch?v=quwebVjAEJA&loop=1" rel – Set this to 0 to only show related videos from the same channel as the current video (or 1 to show videos from any channel). Example: "https://www.youtube.com/watch?v=quwebVjAEJA&rel=0" showinfo – Set this to 0 to hide the video title and other info (or 1 to show it). Example: "https://www.youtube.com/watch?v=quwebVjAEJA&showinfo=0" (YouTube/Google has deprecated this feature) fs – Set this to 0 to hide the fullscreen button (or 1 to show it). Example: "https://www.youtube.com/watch?v=quwebVjAEJA&fs=0" You can also start and end each individual video at particular times. Like the above, each option should begin with ‘&’ start – Sets the time (in seconds) to start the video. Example: "https://www.youtube.com/watch?v=quwebVjAEJA&width=500&height=350&start=20" end – Sets the time (in seconds) to stop the video. Example: "https://www.youtube.com/watch?v=quwebVjAEJA&width=500&height=350&end=100" About the Pro version of the Embed PLus for YouTube Plugin If you like this free version, you may even upgrade to a separate Pro plugin with features like: Full visual embedding wizard Alternate playlist and channel gallery styling >> (list layouts and slider layouts, popup/lightbox player, thumbnail hiding for text only paging, and more) Caching to avoid making frequent requests to YouTube.com and speed up your page loads Automatic video thumbnail images: each post or page that contains at least one video will have the thumbnail of its first video serve as its featured image [Lazy load YouTube embeds] – (https://www.embedplus.com/defer-parsing-of-javascript-improve-gtmetrix-speed-of-page-with-youtube-embed.aspx) with eye-catching effects and animations [YouTube live chat] – (https://www.embedplus.com/embed-youtube-live-chat-box-with-live-stream-embed-wordpress.aspx) Add more interaction to your site by including the YouTube live chat box as part of each live stream embed. Note that live chat can also be an option for earning money from your audience by using the Super Chat and Super Stickers feature. Automatic tagging for video SEO Automatic Open Graph tagging for Facebook Deleted video alerts (i.e., did Google remove or take down videos I previously embedded?) Mobile compatibility checking (i.e., see if your embeds have restrictions that can block your site’s mobile visitors from viewing) Alerts when visitors from different countries are blocked from viewing your embeds Priority support You also get access to our deleted video alerts to help avoid showing embedded videos that are later removed from YouTube.com. You even get an embedder-centric analytics dashboard that adds view tracking to each of your embeds so that you can answers questions like: How much are your visitors actually watching the videos you post? How does the view activity on your site compare to other sites like it? What and when are your best and worst performing YouTube embeds? How much do the producers of the YouTube videos you embed rely on your site, versus other sites and YouTube.com, for views? Are you embedding videos that are blocked in other countries? Have your visitors tried to view a page and/or gallery on your site with deleted/unavailable videos? See more details after installing. Enjoy! This WordPress plugin is maintained by Embed Plus for YouTube. This plugin for YouTube can include premium features like lazy load (with animation), alternate playlist and channel gallery styles, automatic video thumbnail support, automatic schema tagging for video SEO, mobile compatibility checking, and deleted video alerts when you upgrade to PRO.

Demo Install and activate the plugin. Insert the [ypt playlist_id=] shortcode in your page or post and insert your playlist ID after the equal. When that content is published and viewed, a Youtube player will appear and a column of thumbnails will load to the right of the player. Clicking the thumbnails switches between videos. This plugin includes a small CSS file for minimal styling that was written to target the specific IDs of the thumb list and player. Youtube Playlist Thumbs plugin depends on the Youtube Iframe API. Any bugs experienced with that service will affect this plugin. Please check for bugs with Youtube Iframe API before reporting a bug for this plugin. See “Other Notes” for usage. Usage Place this shortcode in your posts or pages and insert your Youtube Playlist ID after the equal. [ypt playlist_id=] To get a Youtube Playlist ID, copy the string after ‘&list=’ when viewing a playlist on Youtube.com. See screenshot #3. To trigger the playback of an ordered video in the playlist, add this attribute to the clickable element: data-ypt-index="X" Where ‘X’ is the order number of the video with the first video starting at 0. The third video would be 2. For example: Click to play the third video. The ‘Now Playing’ thumbnail text and arrow is inserted by CSS. Add this rule to your CSS to change it: #ypt_thumbs .ypt-now-playing > span::after { content: "YOUR NEW TEXT" !important; } The height of the list of thumbnails is set by Javascript. It is first set when the player is ready and it adjusts when the window changes size. If you are using modals or any dynamic method to show/hide the player, you will need to trigger this function when the player is shown: yptThumbHeight(); For example, with Bootstrap modals: $('#videoModal').on('shown.bs.modal', function (e) { //modal shows yptThumbHeight(); //update the thumb height }); A Javascript event triggers at the end of a playlist. It can used to trigger other events: jQuery(document).on('playlistEnd', function () { //playlist finished last video alert("That's all, thanks for watching!"); //do something });