使用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>

相关推荐
Python私教几秒前
CentOS 7 基于 Nginx 的 HTML 部署全流程指南
nginx·centos·html
杨超越luckly16 分钟前
HTML应用指南:利用GET请求获取微博签到位置信息
大数据·信息可视化·数据分析·html·html5
PythonPioneer17 分钟前
每日Html 4.24
前端·html
洛克希德马丁19 分钟前
关于Qt对Html/CSS的支持
css·qt·html
我有一棵树23 分钟前
元素滚动和内容垂直居中同时存在,完美的 html 元素垂直居中的方法flex + margin: auto
前端·html
2401_8370885017 小时前
CSS外边距合并现象
前端·css·html
全栈老李技术面试19 小时前
【高频考点精讲】JavaScript中的访问者模式:从AST解析到数据转换的艺术
开发语言·前端·javascript·面试·html·访问者模式
昔冰_G20 小时前
解锁webpack:对html、css、js及图片资源的抽离打包处理
前端·javascript·css·webpack·npm·html·打包
艾恩小灰灰1 天前
深入理解CSS中的`transform-origin`属性
前端·javascript·css·html·web开发·origin·transform
自带五拨片1 天前
XHTMLConverter把docx转换html报java.lang.NullPointerException异常
java·html