How to improve my website's loadingtime? Youtube embed, Lazy loading

I recongnized that my Website has a slow loadingspeed because I am using many integrated YouTube Videos on my Website (https://battleroyalepro.weebly.com or rather https://battleroyalepro.weebly.com/free-fortnite-intro). So first of all I tried to show the YouTube banner instead of the video and by clicking on it the video will load. This worked, but when I used the code for all Video integreations it will just work for the first on the site. (QUESTION 1: HOW TO MODIFY THIS CODE THAT I WILL WORK FOR MORE VIDEOS ON ONE PAGE:(PS I found this here from another question))

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script>
        var tag = document.createElement('script');

        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        var player;
        function onYouTubeIframeAPIReady() {
            player = new YT.Player('player', {
                width: '640',
height: '315',
                videoId: 'VideoId',
                events: {
                    'onReady': onPlayerReady,
                }
            });
        }

        function onPlayerReady(event) {
            $('#play_vid').click(function() {
                event.target.playVideo();
            });
        }

        $(document).ready(function() {
            $('#player').hide();
            $('#play_vid').click(function() {
                $('#player').show();
                $('#play_vid').hide();
            });
        });
    </script>

    <div id="player" class="wsite-youtube-wrapper wsite-youtube-size-auto wsite-youtube-align-center" style="width: 100%; overflow-y: hidden;"></div>
    <img id="play_vid" src="imgsource" style="width:auto;max-width:100%" />

And second Question: How to make Lazy loading on weebly sites?