Bezdepbonusu7Программирование: статьи и ответы
Меню

Вопрос

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

Автор вопроса: ClockStrikes11Ответов: 2

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

imagehtmlcssyoutubeoverlapping

Ответы

Ответ 1 · рейтинг 6 · Germán Rodríguez

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

пример:

<iframe width="630" height="328" src="http://www.youtube.com/embed/BS0PaiHkbU0?wmode=opaque" frameborder="0" allowfullscreen=""></iframe>

Ответ 2 · рейтинг 1 · sfla99

Вы можете добавить встроенный скрипт 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>

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

Перевод вопроса и ответов сообщества Stack Overflow, лицензия CC BY-SA. Оригинал на Stack Overflow.

Похожие материалы