рамки позади фотографий?

Question

Мой вопрос связан с HTML и PURE html.Я работаю над новым дизайном моей главной страницы в социальной сети kwick и в данный момент хочу создать своего рода пространство для моего любимого видео.

Теперь моя проблема в том, как мне реализовать что-то вроде этого:

Я вот так фотографирую свой iPod (просто пример, это не мой iPod) http://www.clein-online.de/schmuck_projekte/files/ipod_nano_schutzhuelle.jpg

Теперь я хочу создать это изображение в формате gif и вырезать изображение, теперь за этой вырезанной областью должно быть показано видео с YouTube, таким образом, чтобы встроенный проигрыватель НЕ отображался полностью, я имею в виду, что проигрыватель находится там. полностью, но картинка на нем наложена.

Как это сделать?

Answer 1

Изображение вообще не нужно вырезать.Создайте элемент div, в котором достаточно места для всего изображения iPod, и используйте CSS, чтобы сделать его фоновым изображением (можно использовать встроенные стили, если вы не можете добавить свои собственные файлы CSS).

<div style="background:url(ipod.jpg); width:300px; height:400px;">
    <iframe src="..." style="margin: 25px auto 0;" width: 250px; height: 200px;></iframe>
</div>

Примените поля, ширину и высоту к вашему iframe или embed или object чтобы разместить его внутри элемента div с фоновым изображением iPod.

Вы можете установить iframe нужного размера и при необходимости скрыть любое переполнение, но я не думаю, что вы сможете скрыть части Flash, если у вас нет контроля над кодом внедрения.

Answer 2

Вашим самым большим препятствием будет обеспечение того, чтобы ваш WMODE = прозрачный.Если установить для WMODE значение «прозрачный», флэш-флеш не будет всегда появляться поверх другого контента.Затем просто разместите прозрачное изображение в нужном месте поверх видео.

Поскольку вы не включили никакой информации о том, насколько точно вы включаете свой флэш-файл, я не могу точно сказать вам, какой метод вам нужно использовать для установки WMODE.Просто погуглите и все станет ясно.