較小尺寸Youtube影片裏面沒有組隊，探索

我目前在一個網站中Youtube影片的播放器的尺寸小於150×150這是一個iDangero.us Swiper這是jQuery的刷卡插件內工作的工作...較小尺寸Youtube影片裏面沒有組隊，探索

我與應用自定義大小試過如下： -

Youtube player

但它與Firefox中它顯示黑匣子並顯示一個錯誤的玩家創設問題是控制檯： -

我演示： -

My demo

錯誤： -

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

什麼會爲這個解決方案？我有錯誤的地方...

來源

2013-07-06 SaurabhLP

使用CSS3變換的idangerous Swiper會阻止顯示YouTube視頻的控件，並且也會阻止它的全屏選項。

設置上.swiper-container的backface-visibility屬性將防止.swiper-wrapper類全屏的Transform3D CSS防止YouTube上的控制，使許多其他問題，如黑屏，音頻播放視頻沒有等..

所以我認爲你應該考慮改變這個身份不明的Swiper，如果你想讓YouTube視頻正常播放的話。

來源

2013-10-30 21:33:35 Fetto

您是否嘗試過輸入完整的url而不是隻是/ src屬性中的文件名？嘗試一下，讓我知道如果有幫助。

更新：

嘗試改變useCSS3Transforms選項false上構建刷卡的功能，我有這個問題太固定這一點。不知何故，它也會導致YouTube iframe在iOS上崩潰。

來源

2013-10-29 22:24:59

試試這個：

ADD ?html5=1到您的嵌入鏈接
添加useCSS3Transforms: false到刷卡屬性。

就像一個魅力:)

來源

2014-02-21 22:49:46

禁用CSS3過渡是不夠的我。我有一個html5視頻通過swoy幻燈片中的ooyla傳送。

我必須關閉css3transitions並禁用循環才能正確加載視頻。

$('.swiper-container').swiper({ 
    mode:'horizontal', 
    useCSS3Transforms: false, 
    loop: false 
});

我的視頻正在播放！

來源

2014-03-05 02:10:16 cjspurgeon

較小尺寸Youtube影片裏面沒有組隊，探索

回答

相關問題