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

相关推荐
九皇叔叔39 分钟前
HTML与CSS基础入门:从语法到页面结构全解析
css·html·1024程序员节
_殊途2 小时前
HTML-CSS项目练习
前端·css·html
β添砖java4 小时前
vivo响应式官网
前端·css·html·1024程序员节
奶酪博士15 小时前
【html】每日打卡页面
html·1024程序员节
元直数字电路验证15 小时前
HTML 标签及推荐嵌套结构
前端·javascript·html
charlie11451419115 小时前
HTML 理论笔记
开发语言·前端·笔记·学习·html·1024程序员节
Mr.Jessy17 小时前
JavaScript学习第六天:函数
开发语言·前端·javascript·学习·html·1024程序员节
BUG_Jia21 小时前
如何用 HTML 生成 PC 端软件
前端·javascript·html·桌面应用·1024程序员节
0129252021 小时前
1.1 笔记 html 基础 初认识
前端·笔记·html
SepstoneTang1 天前
前端新手入门-HBuilder工具安装
html·html5·1024程序员节