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

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

    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 комментарий
  • Как наложить нижний блок на шапку?

    Это 2 разных изображения будут? Используйте внешний отрицательный верхний отступ для блока снизу.

    upd.
    Смотря как выглядят изображения по отдельности.
    Можно нарезать просто следующим образом:
    5aa3e67f84ae4682166506.png
    ----
    5aa3e68ab26ef724908384.png

    и поставить друг под другом.
    Ответ написан
    Комментировать
  • Как для блока или фона добавить затемнение?

    создай див, спозиционируй его абсолютно, чтобы он был поверх картинки и далее задай ему background linear-gradient с нужным градиентом (от полупрозрачного черного снизу переливай к прозрачному сверху)
    Ответ написан
    Комментировать
  • Замена размера изображения через пользовательский класс?

    Используй !important для стилей
    Ответ написан
    Комментировать