Как я могу плавать PNG над врезанным клипом YouTube

Question

Я проектирую веб-страницу, и концепция - это телевизор, который воспроизводит видео с Youtube.Телевизор - это png внутри div, с прозрачным экраном, чтобы вы могли видеть, что за ним.Я хочу поместить Youtube на экран, но видео Youtube накладывается на div.Если я делаю это с изображением или текстом, он работает нормально.

Проблема в том, что «экран» не является квадратом: изображение имеет небольшой эффект «рыбий глаз», поэтому ни один из краев не является прямыми углы закруглены.Я не против, чтобы часть iframe была спрятана за png телевизора - вот почему я пытаюсь это сделать!- но iframe остается сверху.

Короче говоря, как я могу скрыть часть iframe за png с большим прозрачным разделом в середине?

EDIT

Вот прямая ссылка.Надеюсь, что вы, как джемы :)

http://jkdjkdjkd.zxq.net/redstarartists/index.html

Answer 1

Если я правильно понял, вы хотите иметь возможность размещать материал «над» своим «экраном», который по сути является встроенным видео YouTube?Честно говоря, единственный способ, с помощью которого я могу думать, что это действительно может работать с видео YouTube, - это использовать старый формат встраивания YouTube в iframe и добавить параметр wmode со значением opaque.

<param name="wmode" value="opaque" />

.Этот параметр изменит порядок наложения встроенных флэш-файлов и позволит вам размещать объекты на экране с помощью простых атрибутов позиционирования и z-индекса.

РЕДАКТИРОВАТЬ: Я сказал вам добавитьЗначение opaque для параметра wmode еще я забыл, что некоторые браузеры используют тег embed :) Просто измените свою часть встраивания YT, чтобы она выглядела так (вы заметите параметр wmode как часть embed)

<object width="705" height="559">
    <param name="movie" value="http://www.youtube.com/v/qr-OM5bdlto?version=3&amp;hl=en_US">
    <param name="allowFullScreen" value="true">
    <param name="allowscriptaccess" value="always">
    <param name="wmode" value="opaque">
    <embed src="http://www.youtube.com/v/qr-OM5bdlto?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="705" height="559" allowscriptaccess="always" allowfullscreen="true" wmode="opaque">
</object>

Answer 2

Мое решение этой проблемы состояло в том, чтобы открыть проигрыватель YouTube в iframe вместо объекта:

Затем я добавил wmode = opaque к URL-адресу в качестве параметра get.

Ответьте с 52+ баллами на вопрос здесь

Answer 3

Я не могу гарантировать, что это будет работать †, но вы в основном хотите использовать два абсолютно позиционированных div в пределах относительно позиционированного:

<div class="move_holder">
    <div class="tv_frame"></div>
    <div class="youtube_video"><!-- place video here --></div>
</div>

CSS:

.movie_holder { position: relative; }
.movie_holder div { position: absolute; top: 0; left: 0; width: 500px; height: 350px; }
.tv_frame { background: transparent url(images/tv_frame.png) no-repeat 0 0;

Этоследует поместить .tv_frame выше .youtube_video div.При необходимости отрегулируйте ширину и высоту.

---

† Я не могу этого гарантировать, поскольку флеш-плеер на самом деле не является элементом HTML, поэтому он может отображаться поверх всей страницы.Вам нужно особенно проверить IE!