視頻嵌入和CSS轉換和轉換

Question

我已經將轉換效果添加到包含視頻的容器div。我在黑色的屏幕上嵌入了視頻。我試過了youtube和vimeo，但他們都沒有工作，所以我認爲這與Flash有關。當我對轉換設置發表評論時，視頻再次運行。任何想法可能會發生什麼以及如何解決？

編輯：

http://jsfiddle.net/bUFXA

下面的代碼：

<div class="super-container"> 
<section class="main-content"> 
    <div class="container"> 
     <div class="inner"> 
      <div class="row"> 
       <div class="span8">       
        <div class="entries"> 

         <article id="post-168" class="post-168 post type-post status-publish format-video hentry category-uncategorized category-videos tag-bring-the-noize tag-m-i-a tag-video instock"> 
          <div class="entry-header"> 
           <div class="video_player"> 
            <iframe width="850" height="478" src="http://www.youtube.com/embed/cCkIYkaLBGs?feature=oembed" frameborder="0" allowfullscreen></iframe> 
           </div><!--video_player--> 
           <div class="video-caption">M.I.A. - Bring The Noize</div>     
          </div><!-- .entry-header --> 


          <div class="entry-content"> 
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu feugiat purus. Quisque urna diam, consectetur sit amet est id, rhoncus sollicitudin odio. Phasellus rutrum tellus vitae tincidunt mattis. Proin lobortis pharetra hendrerit. Vivamus id urna arcu. Pellentesque luctus nulla sapien, vel interdum mi luctus a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu feugiat purus. Quisque urna diam, consectetur sit amet est id, rhoncus sollicitudin odio. Phasellus rutrum tellus vitae tincidunt mattis. Proin lobortis pharetra hendrerit. Vivamus id urna arcu.</p> 
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu feugiat purus. Quisque urna diam, consectetur sit amet est id, rhoncus sollicitudin odio. Phasellus rutrum tellus vitae tincidunt mattis. Proin lobortis pharetra hendrerit. Vivamus id urna arcu. Pellentesque luctus nulla sapien, vel interdum mi luctus a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu feugiat purus. Quisque urna diam, consectetur sit amet est id, rhoncus sollicitudin odio. Phasellus rutrum tellus vitae tincidunt mattis. Proin lobortis pharetra hendrerit. Vivamus id urna arcu.</p> 
          </div><!-- .entry-content --> 
         </article><!-- #post --> 

         <article> (...) </article> 
         <article> (...) </article> 
         <article> (...) </article> 

        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</section> 

的CSS：

.super-container { 
position: relative; 
width: 100%; 
-webkit-transform: translate3d(0, 0, 0); 
-moz-transform: translate3d(0, 0, 0); 
-ms-transform: translate3d(0, 0, 0); 
-o-transform: translate3d(0, 0, 0); 
transform: translate3d(0, 0, 0); 
-webkit-transition: -webkit-transform 500ms ease; 
-moz-transition: -moz-transform 500ms ease; 
-o-transition: -o-transform 500ms ease; 
transition: transform 500ms ease; 
-webkit-backface-visibility: hidden; 
-moz-backface-visibility: hidden; 
-ms-backface-visibility: hidden; 
-o-backface-visibility: hidden; 
backface-visibility: hidden; 
} 

Answer 1

好吧，我設法讓它工作。我根本就設置translate3d to 1的價值觀，像這樣：

-webkit-transform: translate3d(1, 0, 0); 
-moz-transform: translate3d(1, 0, 0); 
-ms-transform: translate3d(1, 0, 0); 
-o-transform: translate3d(1, 0, 0); 
transform: translate3d(1, 0, 0); 

我也用平移X代替translate3d，因爲我需要它的隱藏菜單，其中的全部內容移動到左邊。所以我只需要X座標。無論如何，默認值需要是1而不是0.解決了視頻問題。該的jsfiddle是在這裏：http://jsfiddle.net/UrPMj/13/

Answer 2

在jsFiddle我用你的代碼構建，沒有什麼似乎是錯的。但我也沒有看到任何動畫。你首先看到動畫，然後是玩家？

在這裏你可以看到我的電腦上的jsfiddle顯示：

我覺得你的問題是代碼：

-webkit-transform: translate3d(0, 0, 0); 
-moz-transform: translate3d(0, 0, 0); 
-ms-transform: translate3d(0, 0, 0); 
-o-transform: translate3d(0, 0, 0); 
transform: translate3d(0, 0, 0); 
-webkit-transition: -webkit-transform 500ms ease; 
-moz-transition: -moz-transform 500ms ease; 
-o-transition: -o-transform 500ms ease; 
transition: transform 500ms ease; 
-webkit-backface-visibility: hidden; 
-moz-backface-visibility: hidden; 
-ms-backface-visibility: hidden; 
-o-backface-visibility: hidden; 
backface-visibility: hidden; 

因爲如果我做一個簡單的動畫（一個線）它工作正常。 例如：

.super-container { 
    position: relative; 
    width: 100%; 
    transform:rotate(7deg); 
    -ms-transform:rotate(7deg); /* IE 9 */ 
    -webkit-transform:rotate(7deg); /* Safari and Chrome */ 
} 

收率：

哪個顯示完全正常。你可以看看HERE。

所以我的建議是，你通過線重寫CSS3動畫線，看看它停止工作（現在你有太多的冗餘代碼，可以與其他代碼發生衝突;因此防止iframe的顯示）