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

相关推荐
王ASC7 小时前
禁止浏览器自动填充密码的方法
html
qq_510351599 小时前
vw 和 clamp()
前端·css·html
写不出来就跑路14 小时前
基于 HTML+CSS+JavaScript 的薪资实时计算器(含本地存储和炫酷动画)
javascript·css·html
叶玳言1 天前
【LVGL】从HTML到LVGL:嵌入式UI的设计迁移与落地实践
前端·ui·html·移植
蔗理苦1 天前
2025-09-04 HTML1——环境配置与简介
css·vscode·html
一只小阿乐1 天前
Html重绘和重排
前端·html
_Rookie._1 天前
vue3 使用css变量
前端·javascript·html
杨超越luckly1 天前
HTML应用指南:利用GET请求获取全国招商银行网点位置信息
前端·arcgis·信息可视化·html·银行网点
空山新雨(大队长)1 天前
HTML第六课:表格展示
html
蔗理苦1 天前
2025-09-04 HTML3——区块布局与表单
前端·css·html