Arya Dhiratara

<p>Automatically adds Lightbox functionality to images displayed by WordPress (Gutenberg) Gallery and Image Blocks, as well as GenerateBlocks Image Blocks, and also videos created by the core Video Block, using the FSlightbox library.</p>
<p>This lightweight plugin will automatically adds Lightbox functionality to all images displayed by</p>
<ul>
<li>the Core Gallery Block,</li>
<li>the Core Image Block,</li>
<li>GenerateBlocks Image Block,</li>
</ul>
<p>and videos displayed by</p>
<ul>
<li>the core Video Block</li>
</ul>
<p>without the needs to set each gallery/image and video link to the media file so you don’t need to set them manually one by one.</p>
<p><strong>Note</strong>: You can exclude specific image/video from getting the lightbox functionality by adding <code>no-lightbox</code> class to the image/video element.</p>
<h3>About The Plugin</h3>
<ul>
<li>
<p>This plugin has no settings <em>(you can customized the default configuration using filters)</em>, hence does not add any data to the database, so you don’t need to worry about ‘database leftovers’ if you deactivate the plugin.</p>
</li>
<li>
<p>This plugin will automatically add the wrapper link with the necessary attribute on each image and videos that uses the blocks mentioned above to add the lightbox functionality using a few lines of inline script. So it will not make any changes to your original image and video tags (if you check from the page’s HTML source), and will not add extra weight / DOM depth to your page’s HTML.</p>
</li>
<li>
<p>By default, this plugin only works with the native WordPress Gallery, Image, and Video Blocks, as well as GenerateBlocks Image Blocks. You can add additional selectors using filters to make this functionality also works with other image/video blocks. If you need to, send me a request to have your image/video block included by default.</p>
</li>
<li>
<p>This plugin will only enqueued its assets (1 JS file) to pages/posts that use blocks, and will not enqueue assets if the page/post doesn’t use one of them.</p>
</li>
<li>
<p>I provided simple hover CSS which are not enabled by default. You can enable it using filter (<em>see below</em>).</p>
</li>
</ul>
<h3>To add other image/video block:</h3>
<p><strong>Add the CSS class uses by the image/video block element</strong>, e.g:</p>
<pre><code>add_filter( 'use_lightbox_in', function($use_lightbox_in) {
    return $use_lightbox_in . ',.your-other-plugin-block-image-parent-element img, .your-other-plugin-image-class';
} );
</code></pre>
<p><strong>Add the block info/name so that this plugin will enqueued the FSlightbox JavaScripts if the block is use in a post/page</strong>, e.g:</p>
<pre><code>add_filter( 'use_lightbox_if', function($use_lightbox_if) {
    return $use_lightbox_if . '|| has_block( "kadence/advancedgallery" ) || has_block( "your-plugin-block-name/the-block-name" )';
} );
</code></pre>
<h3>To only enable Lightbox Functionality on certain page/post types:</h3>
<p>Simply use the <code>wp_dequeue</code> function**, e.g.:</p>
<pre><code>add_action( 'wp_enqueue_scripts', function() {
    if ( ! is_singular('post') ) { // only enable in single post type
        wp_dequeue_script( 'image-video-lightbox' );
    }
});
</code></pre>
<h3>To only enable simple hover CSS:</h3>
<pre><code>add_filter('use_lightbox_css', function () {
   return true;
});
</code></pre>
<h3>Why using FSlightbox?</h3>
<ul>
<li><strong><a href="https://github.com/banthagroup/fslightbox" rel="nofollow ugc">FSlightbox</a></strong> is Vanilla Javascript Lightbox Library written in pure JavaScript without jQuery or any other additional dependencies.  It’s lightweight (around <strong>9kb</strong> *gzip)!<br />
 </li>
<li>The JavaScript is delayable (<em>*yes, it’s important for me</em>). This is the only lightbox library I found that works when the JavaScript is delayed.</li>
</ul>
<p> </p>
<h3>My other Plugins:</h3>
<ul>
<li>
<p><strong><a href="https://wordpress.org/plugins/optimize-more/" rel="ugc">Optimize More!</a></strong> –  A DIY WordPress Page Speed Optimization Pack. Features:</p>
<ul>
<li><strong>Load CSS Asynchronously</strong> – selectively load CSS file(s) asynchronously on selected post/page types.</li>
<li><strong>Delay CSS and JS until User Interaction</strong> – selectively delay CSS/JS load until user interaction on selected post/page types.</li>
<li><strong>Preload Critical CSS, JS, and Font Files</strong> – selectively preload critical CSS/JS/Font file(s) on selected post/page types.</li>
<li><strong>Remove Unused CSS and JS Files</strong> – selectively remove unused CSS/JS file(s) on selected post/page types.</li>
<li><strong>Load Gutenberg CSS conditionally</strong> – Load each CSS of the core blocks will only get enqueued when the block gets rendered on a page.</li>
<li><strong>Advance Defer JS</strong> – hold JavaScripts load until everything else has been loaded. Adapted from the legendary <strong>varvy’s defer js</strong> method <em>*recommended for defer loading 3rd party scripts like ads, pixels, and trackers</em></li>
<li><strong>Defer JS</strong> – selectively defer loading JavaScript file(s) on selected post/page types.</li>
<li><strong>Remove Passive Listener Warnings</strong> – Remove the “Does not use passive listeners to improve scrolling performance” warning on Google PageSpeed Insights</li>
</ul>
</li>
<li>
<p><strong><a href="https://wordpress.org/plugins/lazyload-preload-and-more/" rel="ugc">Lazyload, Preload, and more!</a></strong> – This tiny little plugin (around <strong>14kb</strong> zipped) will automatically:</p>
<ul>
<li><strong>lazyload</strong> your below the fold images/iframes/videos,</li>
<li><strong>preload</strong> your featured images,</li>
<li>and <strong>add <code>loading="eager"</code></strong> to your featured image and all images that have <code>no-lazy</code> or <code>skip-lazy</code> class.</li>
</ul>
</li>
<li>
<p><strong><a href="https://wordpress.org/plugins/shop-extra/" rel="ugc">Shop Extra</a></strong> – A lightweight plugin to optimize your WooCommerce & Business site:</p>
<ul>
<li><strong>Floating WhatsApp Chat Widget</strong> (can be use without WooCommerce),</li>
<li><strong>WhatsApp Order Button for WooCommrece</strong>,</li>
<li><strong>Hide/Disable WooCommerce Elements</strong>,</li>
<li><strong>WooCommerce Strings Translations</strong>,</li>
<li>and many more.</li>
</ul>
</li>
<li>
<p><strong><a href="https://wordpress.org/plugins/animate-on-scroll/" rel="ugc">Animate on Scroll</a></strong> – Animate any Elements on scroll using the popular AOS JS library simply by adding class names. This plugin helps you integrate easily with AOS JS library to add any AOS animations to WordPress. Simply add the desired AOS animation to your element class name with “aos-” prefix and the plugin will add the corresponding aos attribute to the element tag.</p>
</li>
</ul>
<p> </p>


Image & Video Lightbox

Automatically adds Lightbox functionality to images and videos without the need to set the link to media file manually one by one.

Nico

<p>The best WordPress plugin for videos? Supports close to everything you can imagine, still keeping it easy & simple.</p>
<p>It is very likely the one and only plugin you will ever need to handle video embeds on your WordPress site(s). It goes far beyond just making your videos responsive!</p>
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/m6mkA6Zr1vY?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span>
<h3>Features</h3>
<h4>Classic Editor</h4>
<ul>
<li>Adds “Embed Video” button to help you create very powerful <code>[arve]</code> shortcodes.</li>
<li>Takes over WordPress embeds with URLs on their own line and <code>[embed]</code> shortcodes.</li>
<li>Can take over WP’s default video file embeds.</li>
</ul>
<h4>Block Editor (Gutenberg)</h4>
<ul>
<li>Works with Embed, YouTube, Vimeo, Shortcode … blocks.</li>
<li>Provides it’s own powerful ARVE Block with all the features the <code>[arve]</code> shortcode offers, with a nice UI and detailed settings descriptions.</li>
</ul>
<h4>Elementor</h4>
<ul>
<li>Provides a widget for the entire feature set of ARVE inside Elementor</li>
</ul>
<h4>All</h4>
<ul>
<li>Makes your video embeds <a href="https://nextgenthemes.com/privacy-enhanced-and-safer-iframes-in-arve-10-0/" rel="nofollow ugc">more secure and enhances visitors privacy</a>.</li>
<li>Magically makes videos responsive you already embedded with WordPress default features.</li>
<li>SEO friendly, lets you specify title, description, upload date to provide search engines with the schema.org data they like to have for better indexing. Pro can autofill this for you.</li>
<li>No ‘lock in’ if you do not use the ARVE Gutenberg Block or <code>[arve]</code> shortcodes.</li>
<li>Supports <a href="https://nextgenthemes.com/plugins/arve-pro/#provider-support" rel="nofollow ugc">almost every video host</a> that supports iframe embed codes.</li>
<li>Embeds via pasting the URL in its own line just like WordPress!</li>
<li>Optionally use very powerful Shortcodes instead.</li>
<li>Clean shortcode syntax <code>[arve url="https://youtu.be/yUCFRL43Zm4" parameters="start=30" ... /]</code>, no unnecessary shortcode wrapping.</li>
<li>One shortcode or Block for all video providers.</li>
<li>Responsive embeds with CSS, much better than with JavaScript.</li>
<li>Tries to be as unobtrusive as possible, sets ‘hide brand’ variables if supported, disables related videos from other channels at the end … to help keep people on your site rather then going to YouTube or keep watching videos.</li>
<li>Limited Autoplay (Mobile browsers usually prevent autoplay or allow it only muted. ARVE will automatically mute it but browser settings can still prevent it, even on Desktop)</li>
<li>Custom URL parameters to use all options providers offer.</li>
<li>Optional maximal width.</li>
<li>Video alignment.</li>
<li>Detailed description of options in-place.</li>
<li>Automatic detected and custom aspect ratio.</li>
</ul>
<h4>Supported Providers</h4>
<p><a href="https://nextgenthemes.com/plugins/arve/documentation/#general-iframe-embedding" rel="nofollow ugc">All providers with iframe embed codes</a><br />
Alugha, Archive.org, Banned.video, Bitchute, Brightcove, Brighteon, Dailymotion, Dailymotion Playlist, DTube, Facebook, Google Drive, mp4 or webm video files, ARVE general iframe embed, IGN, IMDB, Kickstarter, kla.tv, Mail.ru, myspace, v.qq.com, Rumble.com, ok.ru, RuTube.ru, TED Talks, TikTok, Twitch, Viddler, Vimeo, VK, Wistia, XTube, xHamster, Yahoo, Youku, YouTube, YouTube Playlist, Kick</p>
<h3>Reviews</h3>
<h4>★ ★ ★ ★ ★ Great plugin, great support</h4>
<p>I’ve been using this plugin (free version and pro add-on) for a few years now. It works very well for my purposes (mainly lazyload and lightbox functionality). Recently I had a support issue with the new version which required some intervention – it was a conflict with my theme. Nico, the developer, went above and beyond to get a fix promptly sorted out for me. Thank you Nico.</p>
<h4>★ ★ ★ ★ ★ The best there is – I have tried many…</h4>
<p>Have downloaded and paid for at least 4 other video players that use lightbox. Each one has major flaws. This products works perfectly. If you use the OnSite Editor, then just copy the short code and it works great.</p>
<p>[arve url=”https://www.youtube.com/watch?v=Z7g8-GxLTSc” /]</p>
<p>For speed, the product uses the thumbnails from the server. So many of the other products do NOT do this and it slows the page rendering. This product should appear first on the WordPress search. Spent 3 days of my life wasted on other products, only to delete each one. <a href="https://wordpress.org/support/plugin/advanced-responsive-video-embedder/reviews/?filter=5" rel="ugc">review by jodani</a></p>
<h4>★ ★ ★ ★ ★ Finally something that works</h4>
<p>So I have a responsive theme but on pages with you tube videos it wasn’t making the you tube videos fit in the mobile screen. I have spent the last hour trying many plugins and researching on google and finally I installed this. And I didn’t have to update any settings or anything just refreshed a post with videos and all the sudden it is beautiful and responsive on my mobile phone!!!!!! THANK YOU!!!! <a href="https://wordpress.org/support/plugin/advanced-responsive-video-embedder/reviews/?filter=5" rel="ugc">review by happyecho</a></p>
<h4>★ ★ ★ ★ ★ Only Plug-in that worked</h4>
<p>I used a lot of high ranking plug-ins but they still broke my design. Downloaded this and worked right away. Thanks! <a href="https://wordpress.org/support/plugin/advanced-responsive-video-embedder/reviews/?filter=5" rel="ugc">review by crconnell89</a></p>
<h3><a href="https://nextgenthemes.com/plugins/arve-pro/" rel="nofollow ugc">ARVE Pro</a></h3>
<p><strong>10% off</strong> first year with discount code <code>wporg</code>.</p>
<p>This plugin is financed by purchases of <a href="https://nextgenthemes.com/plugins/arve-pro/" rel="nofollow ugc">ARVE Pro</a>. The development and support of this plugins has become a job for me, so I hope you understand that I can not make all features gratis and that you <a href="https://nextgenthemes.com/plugins/arve-pro/" rel="nofollow ugc">purchase it</a> to get extra features and support the development.</p>
<ul>
<li><strong>Disable links in embeds (killer feature!)</strong><br />
For example: Clicking on a title in a YouTube embed will not open a new tab. <strong>Prevent video hosts to lead your visitors away from your site!</strong></li>
<li><strong>Lazyload</strong><br />
Make your site load <strong>faster</strong> by loading only an image instead of the entire video player on pageload.</li>
<li><strong>Lightbox</strong><br />
Shows the Video in a Lightbox after clicking a Lazyload preview image</li>
<li><strong>Link ⇾ Lightbox</strong><br />
Use simple links as triggers for opening Video Lightboxes</li>
<li>Auto pause videos when another video is played</li>
<li>Automatic or custom thumbnail images</li>
<li>Automatic or custom titles on top of your thumbnails</li>
<li>‘Expand on click’ feature</li>
<li>2 hover & 3 play icon styles</li>
<li>Responsive thumbnails (srcset)</li>
<li><strong>Feel good about yourself</strong><br />
for supporting my 8+ years work on this plugin. Tons of hours, weekends … always worked on improving it</li>
<li>Show the latest video of a YouTube channel by using the channel URL (updated/cached hourly)</li>
<li><strong><a href="https://nextgenthemes.com/plugins/arve-pro/" rel="nofollow ugc">Get ARVE Pro</a></strong></li>
</ul>
<h3><a href="https://nextgenthemes.com/plugins/arve-sticky-videos/" rel="nofollow ugc">ARVE Sticky Videos</a></h3>
<p>Keep videos on the screen when scrolling.</p>
<ul>
<li>Choose if videos should be pinned to the top of the screen. Like the YouTube app for example.</li>
<li>For bigger screen choose a corner where a video should be pinned to. Like last.fm <a href="https://nextgenthemes.com/plugins/arve-sticky-videos/" rel="nofollow ugc">for example</a>.</li>
</ul>
<h3><a href="https://nextgenthemes.com/plugins/arve-random-video/" rel="nofollow ugc">Random Video Addon</a></h3>
<p>Display random video from:</p>
<ul>
<li>YouTube Playlist</li>
<li>Vimeo Showcase</li>
<li>Comma separated list of video URLs</li>
</ul>
<h3><a href="https://nextgenthemes.com/plugins/arve-amp/" rel="nofollow ugc">ARVE AMP</a></h3>
<p>When you use the AMP or ‘AMP for WP’ plugin you need this.</p>
<ul>
<li>It will display videos embedded with ARVE on AMP pages correctly</li>
<li>No options, just works</li>
<li>It creates <code><amp-youtube></code>, <code><amp-vimeo></code>, <code><amp-dailymotion></code> elements</li>
<li>For all other video hosts <code><amp-video-iframe></code> element is used</li>
<li>Video files are also supported with <code><amp-video></code></li>
</ul>
<h3>Thanks</h3>
<ul>
<li>Of course all the customers who bought a addon.</li>
<li>Howard Iken of <a href="https://www.myfloridalaw.com" rel="nofollow ugc">myfloridalaw.com</a> top donor, super nice to me even if I was rude and not deserved it!</li>
<li><a href="https://www.ilyagrishkov.com" rel="nofollow ugc">Ilya Grishkov</a> for bringing up the idea and the first code to cache thumbnail urls.</li>
<li>Everybody giving constructive feedback, testing beta versions.</li>
<li>Everybody who donated back in the days when this was donation based.</li>
</ul>
<h3>Thanks to the developers of the software used in ARVE</h3>
<ul>
<li><a href="https://github.com/henrygd/bigger-picture" rel="nofollow ugc">Bigger Picture</a>, used in <a href="https://nextgenthemes.com/plugins/arve-pro/" rel="nofollow ugc">Pro Addon</a></li>
</ul>


Advanced Responsive Video Embedder for Rumble, Odysee, YouTube, Vimeo, Kick …

Level up your basic video embeds! Advanced features, privacy. Use URLs, Shortcodes or Blocks to customize videos to your needs.

Image & Video Lightbox vs Advanced Responsive Video Embedder for Rumble, Odysee, YouTube, Vimeo, Kick …