jquery - 较小尺寸的 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 转换的危险 Swiper 会阻止显示 YouTube 视频的控件，并阻止其全屏选项。

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

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