前端实现点击弹出视频展示模块

最新推荐文章于 2022-05-10 15:43:52 发布

Amazon Translator

最新推荐文章于 2022-05-10 15:43:52 发布

阅读量2.3k

点赞数

分类专栏： Jquery HTML

本文链接：https://blog.csdn.net/qq_45140694/article/details/115266928

版权

Jquery 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

HTML

13 篇文章 0 订阅

订阅专栏

最终效果

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>点击按钮展示弹窗视频播放器</title>
</head>
<style type="text/css">
	#show-video {
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		z-index: 999 !important;
		background: rgba(0, 0, 0, .85);
		display: none;
	}

	.video-close {
		width: 45px;
		height: 45px;
		color: #211d1e;
		position: absolute;
		right: 118px;
		top: 113px;
		z-index: 999;
		cursor: pointer;
	}

	#show-video video {
		outline: none;
		max-width: 85%;
		max-height: 88vh;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		box-shadow: 0 20px 40px rgb(0 0 0 / 50%);
	}
</style>
<body>
	<button class="view_more_video">点击观看</button>
	<div id="show-video">
		<a class="video-close">
			<span>
				<svg t="1614676844098" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2082"
				 width="30" height="30">
					<path d="M591.506286 511.853714l417.133714-416.914285a54.601143 54.601143 0 0 0 0-76.8l-2.267429-2.267429a54.601143 54.601143 0 0 0-76.8 0L512.438857 433.481143 95.305143 15.798857a54.601143 54.601143 0 0 0-76.8 0L16.237714 18.066286a53.577143 53.577143 0 0 0 0 76.8l417.097143 416.987428L16.201143 929.097143a54.601143 54.601143 0 0 0 0 76.8l2.267428 2.267428a54.601143 54.601143 0 0 0 76.8 0l417.170286-417.060571 417.097143 417.097143a54.601143 54.601143 0 0 0 76.8 0l2.267429-2.267429a54.601143 54.601143 0 0 0 0-76.8z"
					 p-id="2083" fill="#e6e6e6"></path>
				</svg>
			</span>
		</a>
		<video controls>
			<!-- source 里面的src="这里填写需要展示的视频路径" -->
			<source src="hyrz-kkx.mp4">
		</video>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function() {
			$(".view_more_video").click(function() {
				$("#show-video").show();
			})
			$(".video-close").click(function() {
				$("#show-video").hide();
			})
		})
	</script>
</body>
</html>

Amazon Translator

关注

0
点赞
踩
22

收藏

觉得还不错? 一键收藏
3
评论
前端实现点击弹出视频展示模块

最终效果代码<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>点击按钮展示
复制链接

扫一扫

专栏目录