Geek Answers Handbook

CSS and YouTube Conversion

Using css transforms when embedding YouTube makes video black at least for Safari 5 and Firefox 4. Chrome 11 does a great job of this.

I gave an example here: http://jsfiddle.net/oskarrough/4vRzd/4/

I need css-transform to make some kind of fancy layout layout. Is there a way, css or js, to hack it to display a video?

+5
source share
4 answers

I am solving the same problem right now. I do not do any fancy css conversions just by scaling.

Although it does not work perfectly, I got a video to display using the wmode = transparent parameter.

i.e.

<iframe width='640' height='480' frameborder='0' src='http://www.youtube.com/embed/YOUTUBE_VIDEO_ID?wmode=transparent' type='text/html' class='youtube-player'></iframe>
+5
source

, :

iframe {
    position: relative;
    top: 100px
}

http://jsfiddle.net/4vRzd/5/

margin-top: 100px margin - ?

- , , .

+2

lawrenceshen.

wmode = transparent.

var player;
        function onYouTubeIframeAPIReady() {
            console.log("onYouTubeIframeAPIReady");
            player = new YT.Player('gallery-youtube', {
                height: '594',
                width: '883',
                videoId: 'u1zgFlCw8Aw',
                playerVars: { "modestbranding":1, "wmode":"transparent" },
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }
0

Firefox 4+ Windows 7 Windows 8. , OS X.

. YouTube , CSS3 .

, / .
, , YouTube .

More details . I use animate.css and add class = "animated fadeInDownBig" to shift the modal down. As soon as he reaches his final destination, I delete these classes again.

This is a really weird issue, which I hope Mozilla fixes very soon.

0
source

More articles:


All Articles