调整大小&lt；视频&gt；元素到父div – 开发百科-程序代码问答平台

是否有人能够成功地将视频元素调整为父div

“我的视频”元素包含一个网络摄像头流，其比例为4:3。我想打破这个比例，把它调整到div的大小。我尝试了以下方法：

将宽度和高度设置为100%>这不起任何作用，仍保留4:3
设置minheight和minwidth 100%>这会使视频大小调整到一个非常大的值，使div溢出
位置：绝对、底部、顶部、左侧和右侧：0px在父div上也有巨大的流量
使用javascript获取父div的高度和宽度，然后为视频设置：无效果，保留4:3的比例，无大小更改

怎么做

编辑：感谢Gaurav的详细回复。看起来不错，不过我希望它对我有用

.parentDiv//为我带来约400x400像素的效果
{
位置：绝对位置；
顶部：11px；
右：10px；
左：10px；
高度：-webkit计算（50%-18px）；
高度：计算（50%-18px）；
显示：块；
}

我的视频元素在那里，我给了它你的CSS解决方案。不幸的是，它只变成了白色。我的parentDiv css与此有关吗

编辑2：以下是HTML：

&lt；div class=“parentDiv”&gt；
&lt；视频类=“cam\U视频”自动播放&gt&lt/视频&gt；
&lt/部门&gt；

主要是这样。视频的src属性设置为my webcam stream

编辑3：

如果我右键单击并检查此屏幕截图中的白色（现在为红色）部分https://s22.postimg.cc/th4ha8nmp/ratio2.png，Chrome告诉我白色也属于溪流

看起来网络摄像头的流在顶部和底部都有白色条纹。这是。。讨厌

1）仅限CSS

演示

HTML

&lt；div class=“包装器”&gt；
&lt；视频类=“视频插入”&gt；
&lt；源src=”http://www.w3schools.com/html/movie.mp4“type=”视频/mp4“&gt；
&lt；源src=”https://stackoverflow.com/questions/23248441/movie.ogg“type=“video/ogg”&gt；
您的浏览器不支持视频标记。
&lt/视频&gt；
&lt/部门&gt；

css

.videoInsert{
位置：绝对位置；
右：0；
底部：0；
最小宽度：100%；
最小高度：100%；
宽度：自动；
高度：自动；
z指数：-100；
背景尺寸：封面；
溢出：隐藏；
}

2）jQuery

演示

HTML

&lt；div id=“视频视口”&gt；
&lt；视频自动播放预加载宽度=“640”高度=“360”&gt；
&lt；源src=”https://s3.amazonaws.com/whiteboard.is/videos/bg-loop-new.mp4“/&gt；
&lt/视频&gt；
&lt/部门&gt；

css

视频视口{
位置：绝对位置；
排名：0；
左：0；
溢出：隐藏；
z索引：-1；/*用于通过单击访问视频*/
}
身体{
保证金：0；
}

jquery

根据此答案-模拟背景大小：封面在&lt；视频&gt；或&lt；img&gt

变量最小值w=300；//允许的最小视频宽度
var vid_w_orig；//原始视频尺寸
var vid_h_orig；
jQuery（function（）{//在加载DOM后运行
vid_w_orig=parseInt（jQuery（'video'）.attr（'width'））；
vid_h_orig=parseInt（jQuery（'video'）.attr（'height'））；
$（“#调试”）.append（“&lt；p&gt；加载的DOM&lt；/p&gt；”）；
调整大小（函数（）{resizeToCover（）；}）；
jQuery（window.trigger（'resize'）；
});
函数resizeToCover（）{
//将视频视口设置为窗口大小
jQuery（“#视频视口”）.width（jQuery（window.width（））；
jQuery（“#视频视口”）.height（jQuery（window.height（））；
//使用水平/垂直的最大比例因子
var scale_h=jQuery（window）.width（）/vid_w_orig；
var scale\u v=jQuery（window）.height（）/vid\u h\u orig；
var标度=标度h&gt；标度v？标度h：标度v；
//不允许缩放宽度&lt；最小视频宽度
如果（scale*vid_w_orig&lt；min_w）{scale=min_w/vid_w_orig；}；
//现在缩放视频
jQuery（‘视频’）。宽度（比例*视频源）；
jQuery（“视频”）。高度（比例尺*vid_h_orig）；
//并通过滚动视频视口使其居中
jQuery（“#视频视口”）.scrollLeft（（jQuery（'video'）.width（）-jQuery（window.width（））/2）；
jQuery（“#视频视口”）.scrollTop（（jQuery（'video'）.height（）-jQuery（window.height（））/2）；
};

3）仅使用iframe css

演示

HTML

&lt；div class=“包装器”&gt；
&lt；div class=“h_iframe”&gt；
&lt；iframe src=”https://www.youtube.com/embed/9KunP3sZyI0“frameborder=“0”allowfullscreen&gt&lt/iframe&gt；
&lt/部门&gt；
&lt/部门&gt；

css

.h_iframe iframe{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}

相关文章：

发表评论 取消回复

发表评论取消回复