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/