Youtube и размеры ролика

youtube logo
Заметка для самого себя.
Один раз разобрался, оставляю, чтобы в следующий раз не тратить время.

Youtub'овский ролик поставляется с самого Youtube (Поделиться -> Сгенерировать HTML-код) в виде кода iframe с параметрами ширины и высоты. Их можно вручную каждый раз после вставки кода переписывать под желаемые, а можно один раз через CSS зафиксировать размер, привязав к определённому классу.

Задача: вставлять ролики шириной 70% от общей ширины области сообщения (при этом желательно, чтобы размер видео изменялся при увеличении или уменьшении страницы).

Реализация крайне проста ↓

Код видеоролика:
<iframe class="embed" width="5" height="3" src="http://www.youtube.com/embed/KhTLab9LQS4" frameborder="0" allowfullscreen></iframe>
Здесь всё стандартно, кроме класса embed. Габариты прописаны смешные, чтобы показать, что они не влияют на размеры ролика.

CSS:
<style>
.embed {
width: 70%;
height: 38%;
padding: 3px;
</style>

Для класса embed мы жёстко зафиксировали ширину и высоту (отступы и тени по вкусу)

Демо ↓

3 комментария:

  1. Здорово, спасибо, возьму на вооружение в будущем!

    ОтветитьУдалить
  2. Заметил, в Яндексе при вводе "не для " появилась ссылка на блог?

    Завидую )))

    ОтветитьУдалить
  3. Да, Яндекс время от времени отстёгивает мне, но потом всё забирает назад, так что я уже не радуюсь.

    ОтветитьУдалить