embed - 视频嵌入和 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);

我还使用了 translateX 而不是 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 */
}

产量：

显示得非常好。你可以在这里查看。

所以我建议你逐行重写 CSS3 动画，看看它在哪里停止工作（现在你有太多的冗余代码可能与其他代码发生冲突；因此阻止了 iFrame 的显示）