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

Заметка для самого себя.

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

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 мы жёстко зафиксировали ширину и высоту (отступы и тени по вкусу)

Демо ↓