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

相关推荐
祝余呀1 小时前
HTML初学者第三天
前端·html
zhanshuo8 小时前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang8 小时前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务
孤水寒月15 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀15 小时前
html初学者第一天
前端·html
Eiceblue1 天前
使用 C# 发送电子邮件(支持普通文本、HTML 和附件)
开发语言·c#·html·visual studio
超级土豆粉1 天前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
忧郁的蛋~1 天前
HTML表格导出为Excel文件的实现方案
前端·html·excel
然我1 天前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
小飞悟1 天前
前端高手才知道的秘密:Blob 居然这么强大!
前端·javascript·html