Два полноэкранных видеоролика бок о бок в одном окне

-1

У меня есть два видеоролика, которые бок о бок в браузере, и я хочу, чтобы они имели полный размер окна браузера. Мне не нужно обрезать видео. Я хотел бы, чтобы они были сосредоточены в середине видео с обеих сторон с переполнением сверху, снизу, справа и слева. Я хочу добиться этого эффекта (http://css-tricks.com/multiple-backgrounds-left-half-and-right-half/), но с видео по существу.Два полноэкранных видеоролика бок о бок в одном окне

мой код выглядит следующим образом:

<!DOCTYPE HTML> 
<html> 
<head> 

<style> 
#leftHalf { 
    width: 50%; 
    position: absolute; 
    left: 0px; 
    overflow: hidden; 
} 
#rightHalf { 
    width: 50%; 
    position: absolute; 
    right: 0px; 
    overflow: hidden; 
} 
</style> 

</head> 


<body> 

<!--This is the code that's not working, should have specified--> 
    <video id="rightHalf"width="100%" height="100%" preload autoplay loop muted> 
      <source src="videos/sky.webmsd.webm" type="video/webm"> 
      <source src="videos/sky,mp4" type="video/mp4"> 
      Your browser does not support HTML5 video. 
    </video> 

    <video id="leftHalf" width="100%" height="100%" preload autoplay loop muted> 
      <source src="videos/MVI_2987_1.mp4" type="video/mp4"> 
      <source src="videos/MVI_2987_1.webmhd.webm" type="video/webm"> 
      Your browser does not support HTML5 video. 
    </video> 

</body> 

</html>

источник

2014-09-24 JakeB

Итак, что случилось с тем, что у вас есть? –

В чем дело с выходом? что он делает, чего это не должно делать? вы можете загрузить демо-версию или экран? – sidewaiise

Я изменил его, чтобы вы могли проверить себя. Они появляются бок о бок, но они не являются полной высотой окна браузера. – JakeB

Я не знаю, если я хорошо понимал это, но вы хотите, чтобы видео быть похожим на полный размер страницы? что-то вроде этого?

Online Demo

Если это так, измените параметры Iframe на 100%, как этот

<iframe id="leftHalf" width="100%" height="100%" src="http://www.youtube.com/embed/XGSy3_Czz8k"> 
</iframe> 

<iframe id="rightHalf" width="100%" height="100%" src="http://www.youtube.com/embed/XGSy3_Czz8k"> 
</iframe>

------------- Update Edit - -----------

Для HTML видеоэлемент:

Online Demo

HTML

<div class="leftHalf"> 
    <video preload autoplay loop muted> 
     <source src="examples/video-example.mp4" type="video/mp4"> 
     <source src="examples/video-example.webm" type="video/webm" /> 
     Video not supported. 
    </video> 
</div> 


<div class="rightHalf"> 
    <video preload autoplay loop muted> 
     <source src="examples/video-example.mp4" type="video/mp4"> 
     <source src="examples/video-example.webm" type="video/webm" /> 
     Video not supported. 
    </video> 
</div>

CSS

.leftHalf { 
    position:absolute; 
    left: 0px; 
    height:100%; 
    width:50%; 
    overflow: hidden; 
} 

.rightHalf { 
    position:absolute; 
    right: 0px; 
    height:100%; 
    width:50%; 
    overflow: hidden; 
} 

.leftHalf video { 
    min-width: 100%; 
    min-height: 100%; 
} 
.rightHalf video { 
    min-width: 100%; 
    min-height: 100%; 
}

источник

2014-09-24 01:57:15

Это решение работает с iframe, но не с элементом html

Два полноэкранных видеоролика бок о бок в одном окне

ответ

Смежные вопросы