полной страница-браузер html5 видео без JQuery

Question

Попытки создать полный браузер html5 видео эффект, идентичные этот http://css-tricks.com/perfect-full-page-background-image/

, но с видео я прочитал эту тему Full-bleed background videos? и это Html5 Full screen video

и это, кажется, лучшее решение, но использует jquery http://syddev.com/jquery.videoBG/ Но есть ли метод доказательства дурака без jquery?

Answer 1

Я знаю, что это старый вопрос, но ответ довольно прост.

Просто используйте этот html5 код видео или что-то вдоль этих линий:

<video id="videobackground" preload autoplay muted> 
    <source src="movie.mp4" type="video/mp4"> 
    <source src="movie.ogg" type="video/ogg"> 
    Your browser does not support the video tag. 
</video> 

Затем примените этот CSS:

#video_background { 
    position: absolute; 
    bottom: 0px; 
    right: 0px; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -1000; 
    overflow: hidden 
} 

Минимальная высота и минимальная ширина позволит видео для поддержания соотношение сторон видео, которое обычно является соотношением сторон любого нормального браузера при нормальном разрешении. Любое избыточное видео кровоточит со стороны страницы.

Подробнее на моем веб-сайте: Учебное пособие по HTML-видео - только HTML5 и CSS! http://kesilconsulting.com/web-designer-magazine/html-video-background-tutorial/#ixzz2O3BPNZE6