Ответы пользователя по тегу JavaScript
  • Как оптимизировать страницу состоящую из видео и картинок?

    Привет! Для видео из ютуба я делаю следующее:

    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);
          });
        });
      });


    Суть в том, что изначально вместо видео на странице отображаются пустые блоки нужного размера с фоновой картинкой видео и кнопкой "play". Заставка и кнопка подгружаются с помощью JS.
    Далее при клике по блоку мы с помощью JS подгружаем iframe в этот блок и расставляем необходимые ссылки. ID для видео мы берем из атрибута id в HTML (пишем айдишник изначально в HTML).

    Думаю в твоем случае реализовать можно таким же способом, стоит лишь подкорректировать JS.
    Ответ написан
    1 комментарий