两个全屏视频背景并排在一个窗口中 [英] Two full screen videos background side by side in one window
问题描述
我有两个视频并排在浏览器中，我希望他们有浏览器窗口的完整大小。我不在乎剪辑视频。我想让他们集中在视频的中间，两边都有溢出在顶部，底部，右边和左边隐藏。我想实现此效果（ http：// css-tricks） .com / multiple-backgrounds-left-half-and-right-half / ），但基本上是视频。
I have two videos that are side by side in the browser, and I want them to have the full size of the browser window. I don't care about cropping the videos. I would like to have them centered in the middle of the video each on both sides with the overflow on the top, bottom, right, and left hidden. I want to achieve this effect (http://css-tricks.com/multiple-backgrounds-left-half-and-right-half/), but with videos essentially.
我的代码如下：
<!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>
推荐答案
我不知道我是否理解得很好，但你想要的视频像全尺寸的页面？这样的东西吗？
I don't know if I understood it well, but you want the videos to be like full size of the page? something like this?
如果是，请将iframe参数更改为100％，如下所示：
If it is, change the iframe parameters to 100% like this
<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视频元素：
For html video element:
strong> 在线演示
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%;
}
这篇关于两个全屏视频背景并排在一个窗口中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
