How to optimize a page consisting of videos and pictures?

Question

JavaScript

Hello!
Here is an example of a page type with 42 videos.
How to make the page load quickly?
At first, I wanted to leave the source attribute tag empty, and insert a video image into the poster of the video tag
and, when clicked, insert a link to the video, but I got an error that I encounter for the first time.

Answer 1

Hey! For a YouTube video, I do the following:
HTML:

<div class="slider-videos__videos-item js-youtube-wrap">
    <div class="slider-videos__youtube js-youtube" id="B7_CMlUwiRI"></div>
</div>

CSS (stylus):

.slider-videos
    &__videos-item
        display block
        position relative
        height 154px
        overflow hidden
        background-color white
        width 260px
        transition all 1s ease

        &:focus
            outline none

    &__youtube
        background-position center
        background-repeat no-repeat
        background-size 110%
        position relative
        display inline-block
        overflow hidden
        transition all 200ms ease-out
        cursor pointer
        width inherit
        height inherit

    &__play
        background inline('play-icon.svg') no-repeat
        background-position center
        background-size 15%
        position absolute
        height 100%
        width 100%
        opacity .8
        transition all 0.2s ease-out

        &:hover
            opacity 1

JavaScript:

$(function() {
    $(".js-youtube").each(function() {
      $(this).css('background-image', 'url(http://i.ytimg.com/vi/' + this.id + '/sddefault.jpg)');
      $(this).append($('<div/>', {'class': 'slider-videos__play'}));

      $(document).delegate('#'+this.id, 'click', function() {
        var iframe_url = "https://www.youtube.com/embed/" + this.id + "?autoplay=1&autohide=1&enablejsapi=1";
        if ($(this).data('params')) iframe_url+='&'+$(this).data('params');
        var iframe = $('<iframe/>', {'id': this.id, 'class': 'youtube', 'frameborder': '0', 'allowfullscreen': 'allowfullscreen', 'src': iframe_url, 'width': $(this).width(), 'height': $(this).height() })
        $(this).replaceWith(iframe);
      });
    });
  });

The bottom line is that initially, instead of a video, empty blocks of the required size are displayed on the page with a video background image and a "play" button. The splash screen and the button are loaded using JS.
Next, when clicking on a block, we use JS to load the iframe into this block and place the necessary links. We take the ID for the video from the id attribute in HTML (we write the ID initially in HTML).
I think in your case you can implement it in the same way, you just need to correct the JS.