使用transform对html的video播放器窗口放大

核心是使用

<div class="video" style="width: 100%; height:700px;">播放容器</div>


$('video').css({
            'transform': 'scale(2)',
            'transform-origin': 'center top'
        });

其中

scale 表示放大倍数,可以是小数

transform-origin 表示位置,

1)可以使用坐标点 如 '120px 200px'

2)或者使用方位坐标,left right top bottom总共九个 ,如

左上方 'left top'

上方 'top center'

右上方 'right top'

左方 'left center'

中间 'center center'

右方 'right center'

左下方 'right bottom'

下方 'bottom center'

右下方 'right bottom'

以下是html示例代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Video Scaling and Positioning</title>

<style>

.video-container {

position: relative;

width: 100%; /* 容器宽度 */

height: 100vh; /* 容器高度 */

overflow: hidden; /* 超出部分隐藏 */

}

video {

position: absolute;

top: 50%; /* 垂直居中 */

left: 50%; /* 水平居中 */

transform: translate(-50%, -50%) scale(1); /* 初始缩放为1,居中 */

transition: transform 0.5s ease; /* 增加缩放时的平滑过渡效果 */

}

/* 当鼠标悬停时,缩放并调整位置 */

video:hover {

transform: translate(-30%, -30%) scale(1.5); /* 缩放到1.5倍并移动位置 */

}

</style>

</head>

<body>

<div class="video-container">

<video src="video.mp4" controls></video>

</div>

</body>

</html>

相关推荐
乔峰不是张无忌3305 小时前
【HTML】动态闪烁圣诞树+雪花+音效
前端·javascript·html·圣诞树
hanglove_lucky7 小时前
本地摄像头视频流在html中打开
前端·后端·html
@大迁世界8 小时前
摆脱 `<div>`!7 种更语义化的 HTML 标签替代方案
前端·html
寻找沙漠的人8 小时前
前端知识补充—HTML
html
代码cv移动工程师9 小时前
HTML语法规范
前端·html
觅远10 小时前
python实现word转html
python·html·word
前端Hardy11 小时前
HTML&CSS:酷炫的3D开关控件
前端·javascript·css·3d·html
安小华02713 小时前
html(超文本标记语言)
前端·html
从前有个范特西13 小时前
酷黑金色配色 影片素材不过时 色彩丰富 电影主题html
前端·html
子燕若水14 小时前
简要解释JSON Schema
前端·html·json