Пропорциональное масштабируемое видео и валидный youtube #
Пропорциональное масштабируемое реализовано за счет позиционирования блоков и процентных соотношений. Применимо на резиновых сайтах.
CSS
Код видео с ютуба по умолчанию не валидный, здесь же он добавлен в соответствии стандартам
HTML
...
Очень мне нравится девочка с видео демки -)
ДЕМО: https://veselov.sumy.ua/uploads/files/demo/003/index.html
CSS
#containingBlock {
width:50%;
}
.videoWrapper {
position: relative;
padding-bottom:56.25%;
padding-top:25px;
height:0;
overflow:hidden;
}
.videoWrapper div,
.videoWrapper object {
position:absolute;
top:0;
left:0;
width: 100%;
height:100%;
}
width:50%;
}
.videoWrapper {
position: relative;
padding-bottom:56.25%;
padding-top:25px;
height:0;
overflow:hidden;
}
.videoWrapper div,
.videoWrapper object {
position:absolute;
top:0;
left:0;
width: 100%;
height:100%;
}
Код видео с ютуба по умолчанию не валидный, здесь же он добавлен в соответствии стандартам
HTML
Following is the description of the video embeded in this document
This short clip is about YouTube widescreen formatting. It shows the two main formats (16:9, 4:3) and also explains the best way to create a Flash movie according to the new widescreen format.
...
Очень мне нравится девочка с видео демки -)
ДЕМО: https://veselov.sumy.ua/uploads/files/demo/003/index.html