Question

我正在使用lazyYT加载YouTube视频的速度更快。然后将加载的lazyYT视频放置在光滑的滑块中。然后发生的事情是视频在每个视频之间粘在一起而不是很好的边缘。所以我手动将一个类添加到视频div

<div class="js-lazyYT" id="video-slide" data-youtube-id="<?php echo $video['video_link']; ?>" data-width="500" data-height="425"></div>

并给它一个保证金工作正常，直到第一个视频再次加载回来。它们粘贴在一起，直到所有三个第一个视频再次可见。

#video-slide{
    width: 500px !important;
    height: 425px !important;
    margin-right: 10px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

enter image description here

看起来滑块中的前3个条目在可见时会再次重新加载滑块。有什么想法吗？

;(function ($) {
    'use strict';

    function setUp($el) {
        var width = $el.data('width'),
            height = $el.data('height'),
            ratio = $el.data('ratio'),
            id = $el.data('youtube-id'),
            aspectRatio = ['16', '9'],
            paddingTop = 0,
            youtubeParameters = $el.data('parameters') || '';

        if (typeof width === 'undefined' || typeof height === 'undefined') {
          height = 0;
          width = '100%';
          aspectRatio = (ratio.split(":")[1] / ratio.split(":")[0]) * 100;
          paddingTop = aspectRatio + '%';
        }

        $el.css({
            'position': 'relative',
            'height': height,
            'width': width,
            'padding-top': paddingTop,
            'background': 'url(http://img.youtube.com/vi/' + id + '/hqdefault.jpg) center center no-repeat',
            'cursor': 'pointer',
            'background-size': 'cover'
        })
            .html('<p id="lazyYT-title-' + id + '" class="lazyYT-title"></p><div class="lazyYT-button"></div>')
            .addClass('lazyYT-image-loaded');

        $.getJSON('https://gdata.youtube.com/feeds/api/videos/' + id + '?v=2&alt=json', function (data) {
            $('#lazyYT-title-' + id).text(data.entry.title.$t);
        });

        $el.on('click', function (e) {
            e.preventDefault();
            if (!$el.hasClass('lazyYT-video-loaded') && $el.hasClass('lazyYT-image-loaded')) {
                $el.html('<iframe width="' + width + '" height="' + height + '" src="//www.youtube.com/embed/' + id + '?autoplay=1&' + youtubeParameters + '" style="position:absolute; top:0; left:0; width:100%; height:100%;" frameborder="0" allowfullscreen></iframe>')
                    .removeClass('lazyYT-image-loaded')
                    .addClass('lazyYT-video-loaded');
            }
        });

    }

    $.fn.lazyYT = function () {
        return this.each(function () {
            var $el = $(this).css('cursor', 'pointer');
            setUp($el);
        });
    };

}(jQuery));

Answer 1

我正在查看lazyYT网站并找到了他们的例子：

<div class="container">
   <div class="js-lazyYT" data-youtube-id="_oEA18Y8gM0" data-width="560" data-height="315" data-parameters="rel=0"></div>
</div>

鉴于此，您可以尝试：

.myclass {
  margin-left: 5px;
}

    <div class="container">
       <div class="js-lazyYT myclass" data-youtube-id="_oEA18Y8gM0" data-width="560" data-height="315" data-parameters="rel=0"></div>
    </div>

或

<div class="container">
   <div class="js-lazyYT" data-youtube-id="_oEA18Y8gM0" data-width="560" data-height="315" data-parameters="rel=0"> style='margin-left: 5px'</div>
</div>

或

.myclass div {
  margin-left: 5px;
}

<div class="container myclass">
   <div class="js-lazyYT" data-youtube-id="_oEA18Y8gM0" data-width="560" data-height="315" data-parameters="rel=0"></div>
</div>

光滑的滑块边缘问题lazyYT

1 个答案: