Video Embeds and CSS transitions & transforms - embed

Question

I have added transition effects to a container div that contains videos. I getting a black screen where the video embed is supposed to be. I tried both youtube and vimeo and they're both not working, so I think it has something to do with flash. When I comment the transition settings out, the video works again. Any ideas what could be going on and how to fix it?
Edit:
http://jsfiddle.net/bUFXA
Here's the code:
<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>
The 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

Ok, I managed to get it to work. I simply had to set the values of the translate3d to 1 like so:
-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);
I also used translateX instead of translate3d, because I need it for a hidden menu where the entire content is moved to the left. So I only needed the X-coordinate after all. Anyway, the default value needed to be 1 instead of 0. That solved the problem with the video. The JSFiddle is here: http://jsfiddle.net/UrPMj/13/

Answer 2

In the jsFiddle I constructed with your code, nothing seems to be wrong. But I also don't see any animation. Do you first see the animation and then the player?
Here you can see how the jsFiddle displays on my computer:
I think your problem is in the code:
-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;
Because if I do a simple animation (one line) it works fine.
For example:
.super-container {
position: relative;
width: 100%;
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
Yields:
Which displays perfectly fine. You can check it out HERE.
So what I suggest is that you rewrite the CSS3 animations line by line and see where it stops working (right now you have too much redundant code which can collide with the other code; hence preventing display of the iFrame)