2013-04-15 2 views
1

Я хотел бы разместить статическое изображение поверх видеопроигрывателя YouTube; однако кажется, что они каким-то образом блокируют это от происходящего?Как разместить изображение поверх проигрывателя YouTube?

До сих пор я пытался установить индекс z выше, чем игрок YouTube, но это не работает.

Например:

<img src="../example.png"/ width="100" height="100" class="image" /> 
<iframe width="420" height="315" src="http://www.youtube.com/embed/k6U-i4gXkLM" frameborder="0" allowfullscreen></iframe> 


.image { position: absolute; z-index: 10000; } 
+0

Почему вы хотите поместить изображение в верхней части YouTube видео. Почему вы не используете jquery, и когда они нажимают на изображение, оно заменяет изображение видео с YouTube, а не – Andrew

+0

[кажется, это работает] (http://jsbin.com/ulasow/1/edit) как в Chrome, так и в Firefox. –

+0

Клиент требует :( – Matt

ответ

0

Ваш код работает отлично. Просто слэш после «../example.png» не нужен, но он все равно будет работать.

0

Вы должны быть в состоянии добавить wmode = transparent к url ​​iframe youtube. См:

Youtube iframe wmode issue

Рабочего пример:

http://www.parentmap.local/article/webinar-parents-guide-to-college-admissions

Обратите внимание, как выпадающее меню перекрывает видео IFRAME.

Если это не поможет по какой-либо причине, вы можете загрузить изображение предварительного просмотра youtube с помощью javascript, а затем наложить на него надпись. Загружайте реальный iframe, когда кто-то на самом деле щелкает элемент.

Быстрый прибегая к помощи находит это на YouTube изображениях:

http://www.reelseo.com/youtube-thumbnail-image/

Пример из этой страницы URL предварительного просмотра изображения:

http://img.youtube.com/vi/bQVoAWSP7k4/0.jpg

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