CSS3 Rotating YouTube Video

[anton2k]

UPDATE: Sorry guys this actually works in FireFox, Opera, Safari but chrome does some weird thing, try it for your self, and IE well no surprise that it just failed…. this is the second css3 issue i have had with chrome, i though out of all the browsers chrome would be the one i would have have the lease amount of problems with :/

Hey guy’s so i was just messing around with css3 and all the cool new stuff it has to offer, so for no reason at all i though “i wonder if i can rotate a youtube video embed iframe” random i know but i just thought it would be pretty cool to play a music video at a -45 degree angle using nothing but css, lol.

So here is what i though would work but does not, it rotates the iframe but not the flash/(html5?) object within it, i am still learning css3 and would appreciate any help any one has to offer on this, have searched around Google and can only find .js solutions which i don’t want.

Cheers,

– Antony.

[anton2k]

So after some tinkering around with this i can only conclude that the problem is with chrome and IE, here is something cool for you all to look at, using animation to rotate a YouTube video 360 degrees, only works on FireFox at the moment, here is the css and html any way.

CSS

@-webkit-keyframes rotate {

from {

-webkit-transform: rotate(0deg);

}



to {

-webkit-transform: rotate(360deg);

}

}



@-moz-keyframes rotate {

from {

-moz-transform: rotate(0deg);

}



to {

-moz-transform: rotate(360deg);

}

}



@-ms-keyframes rotate {

from {

-ms-transform: rotate(0deg);

}



to {

-ms-transform: rotate(360deg);

}

}





#emb {





position: absolute;

width:560px;

height:315px;



}





iframe {



width:560px;

height:315px;



-webkit-animation-name: rotate;

-webkit-animation-duration: 50000ms; /* 50 seconds */

-webkit-animation-iteration-count: infinite;

-webkit-animation-timing-function: linear;

-moz-animation-name: rotate;

-moz-animation-duration: 50000ms; /* 50 seconds */

-moz-animation-iteration-count: infinite;

-moz-animation-timing-function: linear;

-ms-animation-name: rotate;

-ms-animation-duration: 50000ms; /* 50 seconds */

-ms-animation-iteration-count: infinite;

-ms-animation-timing-function: linear;

}

HTML

:D

[bluntman001]

I’m having the same problem with my website http://www.ehowtodrywall.com.
I was wondering if this is the best way to make the vids rotate … thank you

[Author]

Posts