2012-03-22 2 views
4

На Diveboard, мы сделали хорошую хак photoswipe для поддержки видеоYoutube IFrame встроенного видео не работает (черный экран)

Все шло хорошо, пока я не обнаружил, Firefox 11 и 12 беты не играет видео YouTube внедренного больше ... кажется, они загружены, мы можем слышать звук ad pufff без изображений ... так что вместо этого вы используете радиостанцию ​​youtube : Video example page

И я снова и снова царапал себе голову это один, но я не знаю :(:

EDIT: По-видимому, это проблема ТОЛЬКО O N OSX !!! что делает меня еще более невежественны ...

Любой намек будет apreciated

код IFrame довольно прост:

<iframe width='#{width}' height='#{height}' src='http://www.youtube.com/embed/#{matchdata}?wmode=opaque&autoplay=1' frameborder='0' allowfullscreen></iframe> 
+1

Так что нету»решаемые" это, но вот несколько советов: вопрос исходит от 2 -moz-преобразования на обоих родительских и parent.parent дивы проведения IFRAME условно загрузки Тг 11 + & OSX CSS-с #lightbox .ps-карусельного контента {-moz-преобразования: ни один важный} #lightbox .ps-карусельного-п {-moz-преобразование не: ни один важный} вопрос обойдена но решение на самом деле не удовлетворительное - Adobe ребята, пожалуйста, исправьте своего игрока, ребята из FF, пожалуйста, включите h264 ..., youtube ребята, пожалуйста, сбросьте флеш .... –

+0

известная ошибка, пожалуйста, ГОЛОСОВАТЬ !!! - https://bugzilla.mozilla.org/show_bug.cgi?id=811547 – vsync

+1

[Duopixel] (http://stackoverflow.com/questions/17747443/css-transform-translate-breaking-youtube-embedded-video?answertab = votes # tab-top) имеет решение, добавив '& html5 = 1' в URL-адрес встраивания YouTube. [Firefox поддерживает HTML5-видео] (http: // caniuse.com/video) вернуться к версии 3.5, чтобы она была безопасной. –

ответ

1

Что CSS стиль вы используете на вашем IFRAME? http://argylesocial.com использовал border-radius на youtube html5 iframes, и удаление этих деклараций стиля разрешило проблему.

Мне нужно было удалить и -moz-border-radius и border-radius, чтобы получить видео для правильного отображения. Сейчас работает как шарм!

+0

не так: вот объяснение :) http://ksso.net/~alex/ff_bug/moz-transform.html –

+0

@AlexanderCasassovici ссылка не работает –

0

я получал один и тот же вопрос на моем сайте блоге я развиваю, я добавил высоту для фрейма, как Firefox не было захватывая высоту от метки высоты в iframe, решение либо добавляет высоту с помощью тега стиля, но если ее отзывчивый веб-сайт использует медиа css для высоты тегов iframe. Пример может объяснить это лучше.

При использовании фиксированной высоты для фрейма, то попробуйте добавить стиль тег в IFRAME, как в

style="height:374px" 

Если отзывчивый сайт оных в IFRAME на запрос СМИ в CSS - например:

@media screen and (min-width: 100px) and (max-width:768px) { 
    .video iframe {height:200px} 
} 

и так далее.

Это сработало для меня, я надеюсь, что это поможет и другим.

Спасибо!

Смежные вопросы