Перекрытие видео Youtube с изображением

Я просто хотел знать, можно ли наложить видео на YouTube (фактический видеоплеер) на изображение. Я хочу сделать так, чтобы это выглядело так, как будто две руки держат видео на YouTube, одна левая и одна правая. Я понял, что это простая штука с CSS, но не был уверен, так как ничего не нашел в Интернете (все, что я нашел, это изображения, накладывающиеся друг на друга и исчезающие). В любом случае, любая помощь будет оценена по достоинству. Спасибо!


image html css youtube overlapping
person ClockStrikes11    schedule 20.09.2011    source источник

Ответы (2)


arrow_upward
6
arrow_downward

используйте метод iframe и добавьте ?wmode=opaque в конец URL-адреса видео.

пример:

<iframe width="630" height="328" src="http://www.youtube.com/embed/BS0PaiHkbU0?wmode=opaque" frameborder="0" allowfullscreen=""></iframe>
person Germán Rodríguez    schedule 20.09.2011

arrow_upward
1
arrow_downward

Вы можете добавить встроенный скрипт YouTube в div на странице, затем с помощью CSS установить относительное положение этого div, теперь поместите другой div внутри div, который содержит видео YouTube, и установите для этого div абсолютное положение, теперь вы можете определите, где на странице вы хотите, чтобы ваше изображение отображалось, и его ограничивающие области будут определяться относительной позицией div.

Вот пример:

<div class="YouTube">
    <!-- embedded YouTube Script -->
    <div class="FloatingImage">
        <img src="#" height="" width="" />
    </div>
</div>

Ваш CSS может выглядеть примерно так:

<style type="text/css">
    .YouTube { width: 450px; height: 400px; position: relative; }
    .FloatingImage { position: absolute; top: 75px; left: 0px; height: 50px; width: 25px; }     
</style>

Надеюсь это поможет!

person sfla99    schedule 20.09.2011