Adding CSS perspective property to video

Question

I would like to apply the css perspective property to a youtube video.

I have tried a few things. I have added style directly to the embed code as well as a div container:

perspective: 1000px; 
-moz-perspective: 1000px; 
-webkit-perspective: 1000px;
-webkit-transform: rotateY(45deg);

None of these worked. I also tried the html5 video solution as shown here: Html5 video perspective transform

However, when used with the youtube embed code, the video container was rotated, but the video no longer plays (as shown in the snippet below.)

Any ideas how to make this work with youtube?

UPDATED: I put the iframe inside a div to correct the problem. Thank you @dekel!

.video-wrapper {
  perspective: 1000px;
}
.video {
  transform: rotateY(-30deg);
}

<div class="video-wrapper">
  <div class="video">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/8NGNKBIA_eI?rel=0" frameborder="0" allowfullscreen></iframe>
  </div>
</div>