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

相关推荐
CoderYanger14 小时前
前端基础——HTML练习项目:填写简历信息
前端·css·职场和发展·html
CodeCraft Studio14 小时前
国产化PDF处理控件Spire.PDF教程:如何在 C# 中从 HTML 和 PDF 模板生成 PDF
pdf·c#·html·.net·spire.pdf·pdf文档开发·html创建模板pdf
muyouking1114 小时前
深入理解 HTML `<label>` 的 `for` 属性:提升表单可访问性与用户体验
前端·html·ux
软件技术NINI15 小时前
html css js网页制作成品——饮料官网html+css+js 4页网页设计(4页)附源码
javascript·css·html
软件技术NINI15 小时前
html css js网页制作成品——HTML+CSS辣条俱乐部网页设计(5页)附源码
javascript·css·html
我有一棵树17 小时前
使用Flex布局实现多行多列,每个列宽度相同
前端·css·html·scss·flex
孤客网络科技工作室19 小时前
Python - 100天从新手到大师:第五十七天获取网络资源及解析HTML页面
开发语言·python·html
*且听风吟1 天前
html 实现鼠标滑动点亮横轴
前端·javascript·html
洋不写bug1 天前
前端html基础标签
前端·html
芒果茶叶1 天前
深入浅出requestAnimationFrame
前端·javascript·html