HTML5 & CSS3: Наложение текста на видео

Пример Скачать .zip

Ранее я уже писал о том как наложить текст на изображение. Сейчас пришло время поговорить о том, как решить более сложную задачу и наложить текст поверх видео. Источником вдохновения стал сайт Everlane, на котором подобная задача решена.

Однако, приведенный здесь код значительно проще по причине того, что будет работать только на современных браузерах: режим mix-blend-mode пока не поддерживается в MS Edge. Но, как говорится, поучительно и будет работать в IE10+.
Читать далее «HTML5 & CSS3: Наложение текста на видео»

«. . . ежик резиновый с дырочкой в правом боку» или адаптивный дизайн видео

В мире адаптивного дизайна и «резиновых» макетов единственный тип медиа-данных стоит на пути совершенной гармонии — видео. Есть масса способов показать видео на своём сайте. Можно самостоятельно хостить видео и предоставлять его с помощью HTML-тега video. Можно использовать YouTube или Vimeo, которые предоставляют код iframe для показа видео. Можно использовать Viddler или Blip.tv и теги object/embed для флеш-плеера. И во всех этих сценариях обязательно объявляются статические ширина и высота.

Читать далее ««. . . ежик резиновый с дырочкой в правом боку» или адаптивный дизайн видео»