CSS трансформация и встраивание YouTube - PullRequest
Новая
       8

CSS трансформация и встраивание YouTube

5 голосов
/ 15 апреля 2011

Использование css-преобразований на встраивании на YouTube делает видео черным как минимум в Safari 5 и Firefox 4. Chrome 11 справляется с этим очень хорошо.

Я сделал пример здесь: http://jsfiddle.net/oskarrough/4vRzd/4/

Мне нужно css-преобразование, чтобы сделать какое-то необычное расположение макетов. Есть ли способ, css или js, взломать его для отображения видео?

Ответы [ 4 ]

5 голосов
/ 30 апреля 2012

Я сейчас решаю ту же проблему.Я не делаю каких-либо необычных преобразований CSS, просто масштабирую.

Несмотря на то, что я не работал идеально, я получил видео для отображения с помощью опции wmode = transparent.

т.е. 

<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>
2 голосов
/ 15 апреля 2011

Вы уверены, что не можете использовать это вместо этого: 

iframe {
    position: relative;
    top: 100px
}

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

Или margin-top: 100px, или отрицательный margin для какого-либо другого элемента?

Кто-то должен был опубликовать это, потому что вы не упомянули, что они не являются жизнеспособными вариантами.

0 голосов
/ 06 февраля 2013

Для меня эта проблема возникала только в Firefox 4+ в Windows 7 и Windows 8 .Это не произошло ни в одном другом браузере или в OS X.

Я часами застрял в этой проблеме.Я показываю видео YouTube в модальном режиме, который использует переводы CSS3 для показа.

Мое решение состояло в том, чтобы удалить классы преобразования / перехода, как только модал появился .
Как только я это сделал, появился YouTube для встраивания, и больше нет пустого черного ящика.

Подробнее : я использую animate.css и добавляю class = "animated fadeInDownBig«скользить модально вниз.Как только он достиг конечного пункта назначения, я снова удаляю эти классы.

Это действительно странная проблема, которую, я надеюсь, Mozilla исправит очень скоро.

0 голосов
/ 31 января 2013

Upvote для адвокатов.

wmode = прозрачный работает. 

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
                }
            });
        }
...