veselov.sumy.ua > CSS, XHTML > Пропорциональное масштабируемое видео и валидный youtube

Пропорциональное масштабируемое видео и валидный youtube


12.05.10.
Пропорциональное масштабируемое реализовано за счет позиционирования блоков и процентных соотношений. Применимо на резиновых сайтах.
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%;
}

Код видео с ютуба по умолчанию не валидный, здесь же он добавлен в соответствии стандартам

HTML

  

    

      
      
      
      
        
        
        

Get Adobe Flash player


      

    

    

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

Вернуться назад