使用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 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
iphone1089 小时前
一次编码,多端运行:HTML5多终端调用
前端·javascript·html·html5
一天睡25小时12 小时前
一款减轻前端图片命名工作量的图片转换器
前端·javascript·html
梅纳德13 小时前
如何发现一个网站的全部页面?7种方法
html
一只小风华~15 小时前
Web前端开发: :has功能性伪类选择器
前端·html·html5·web
天天扭码1 天前
《很全面的前端面试题》——HTML篇
前端·面试·html
到底起什么网名才能不重名1 天前
使用各种CSS美化网页
前端·css·vscode·bootstrap·html
默默地离开2 天前
Blob二进制处理的王者
前端·javascript·html
西西木科技丨Shopify开发机构2 天前
如何在 Shopify 中建立重定向
前端·html
Liudef062 天前
基于HTML与Java的简易在线会议系统实现
java·前端·html