较小尺寸的 Youtube 视频在 Swiper 中无法工作

Question

我目前在一个网站工作，其中Youtube 视频的播放器大小小于 150x150，位于iDangero.us Swiper内中，它是 jquery swiper 插件...

我尝试过应用自定义尺寸，如下所示：-

但它在 Firefox 中给播放器带来了问题，它显示黑框并在控制台显示错误：-

我的演示：-

错误：-

NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 1 [nsIDOMEventTarget.removeEventListener]

我也在 Chrome 上进行了测试，它显示得很好......

我正在使用这段代码：-

<div class="swiper-container swiper-vid">
                            <div class="swiper-wrapper">
                              <div class="swiper-slide">
                                <div class="vid-contain">
                                <div class="videoWrapper">
                                    <!-- Copy & Pasted from YouTube -->
                                    <iframe width="142" height="80" src="//www.youtube.com/embed/_wmzPRwLIaM?showinfo=0" frameborder="0" allowfullscreen></iframe>
                                </div>
                                <p>Slide 1</p>
                                </div>
                              </div>
                              <div class="swiper-slide">
                                <div class="vid-contain">
                                <div class="videoWrapper">
                                    <!-- Copy & Pasted from YouTube -->
                                    <iframe width="142" height="80" src="//www.youtube.com/embed/Mn63rXCkCxY?showinfo=0" frameborder="0" allowfullscreen></iframe>
                                </div>
                                <p>Slide 2</p>
                                </div>
                              </div>
                              <div class="swiper-slide">
                                <div class="vid-contain">
                                <div class="videoWrapper">
                                    <!-- Copy & Pasted from YouTube -->
                                    <iframe width="142" height="80" src="//www.youtube.com/embed/_wmzPRwLIaM?showinfo=0" frameborder="0" allowfullscreen></iframe>
                                </div>
                                <p>Slide 3</p>
                                </div>
                              </div>
                              <div class="swiper-slide">
                                <div class="vid-contain">
                                <div class="videoWrapper">
                                    <!-- Copy & Pasted from YouTube -->
                                    <iframe width="142" height="80" src="//www.youtube.com/embed/Mn63rXCkCxY?showinfo=0" frameborder="0" allowfullscreen></iframe>
                                </div>
                                <p>Slide 4</p>
                                </div>
                              </div>
                              <div class="swiper-slide">
                                <div class="vid-contain">
                                <div class="videoWrapper">
                                    <!-- Copy & Pasted from YouTube -->
                                    <iframe width="142" height="80" src="//www.youtube.com/embed/_wmzPRwLIaM?showinfo=0" frameborder="0" allowfullscreen></iframe>
                                </div>
                                <p>Slide 5</p>
                                </div>
                              </div> 
                              <div class="swiper-slide">
                                <div class="vid-contain">
                                <div class="videoWrapper">
                                    <!-- Copy & Pasted from YouTube -->
                                    <iframe width="142" height="80" src="//www.youtube.com/embed/Mn63rXCkCxY?showinfo=0" frameborder="0" allowfullscreen></iframe>
                                </div>
                                <p>Slide 6</p>
                                </div>
                              </div>
                              <div class="swiper-slide">
                                <div class="vid-contain">
                                <div class="videoWrapper">
                                    <!-- Copy & Pasted from YouTube -->
                                    <iframe width="142" height="80" src="//www.youtube.com/embed/_wmzPRwLIaM?showinfo=0" frameborder="0" allowfullscreen></iframe>
                                </div>
                                <p>Slide 7</p>
                                </div>
                              </div>
                              <div class="swiper-slide">
                                <div class="vid-contain">
                                <div class="videoWrapper">
                                    <!-- Copy & Pasted from YouTube -->
                                    <iframe width="142" height="80" src="//www.youtube.com/embed/Mn63rXCkCxY?showinfo=0" frameborder="0" allowfullscreen></iframe>
                                </div>
                                <p>Slide 8</p> 
                                </div>
                              </div>
                            </div>
                          </div>

使用的JS：-

swiperVid = $('.swiper-vid').swiper({
        slidesPerSlide : 3,
        calculateHeight:true
    });

对此有何解决方案？我是不是搞错什么地方了...

Answer 1

使用 CSS3 转换的 idangerous Swiper 会阻止显示 YouTube 视频的控件，并阻止其全屏选项。

设置backface-visibility属性打开.swiper-container将阻止类上的全屏transform3d CSS.swiper-wrapper阻止youtube的控制并产生许多其他问题，例如黑屏，没有视频的音频播放等......

所以我认为如果你想让youtube视频正常播放，你应该考虑改变危险的Swiper。