The plug-in cuts out all the inserted videos from YouTube and replaces them with the links with the image. This will speed up the uploading of the page in the browser, if the page uses many blocks with video. When clicking on such a link, you can open a modal window with the player.

If Bootstrap is connected to the site, the modal windows will work automatically.

The set includes chunk tpl.wrapYoutube, which is used to replace the video code on the pages. The used chunk can be changed in the system settings.

System settings

wrapyoutube_tpl — chunk to be used for replacement
wrapyoutube_front_css — stylesheet for design
wrapyoutube_front_js — script file for initializing modal windows

Placeholders available in the chunk

id — video id
img — preview video
link — link specified originally in the code iframe
embed — link for the modal auto-play window
width — roller width
height — roller height

Using Fancybox

Connect the Fancybox and add initialization to the WY_link class:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js" type="text/javascript"></script>
<script>
    $(document).ready(function(){
        $('.WY_link').fancybox();
    });
</script>

The chunk code tpl.wrapYoutube can be:

<a href="[[+embed]]" class="WY_link" data-fancybox-type="iframe">
    <img src="[[+img]]" width="[[+width]]" height="[[+height]]">
</a>