当前位置: 首页 > article >正文

iframe视频宽度高度自适应( pc+移动都可以用,jq写法 )

注意:要引入jquery

可以直接使用弹框播放iframe

移动PC样式

一、创建 index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			.modal {
				/* 默认隐藏 */
				display: none;
				position: fixed;
				z-index: 99999;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(3, 3, 3, .8);
			}
			.close-btn {
				/* 关闭按钮 */
				position: absolute; 
				z-index: 100; 
				right: 10px; 
				top: -30px; 
				font-size: 18px; 
				color: #fff;
				text-align: center;
				cursor: pointer;
			}
			/* 弹窗内容 */
			.modal-content {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				padding: 13px 9px;
				width: 100%; /* 这个要先去掉,手机端时在加上 */
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.iframe{
			  position: relative;
			  padding-bottom: 56.25%;
			  height: 0;
			  overflow: hidden;
			}
			.iframe iframe {
			  position: absolute;
			  top: 0;
			  left: 0;
			  width: 100%;
			  height: 100%;
			}
			.iframe-width{
				/* PC  */
				position: absolute; left:50%; transform: translateX(-50%); 
				width: 900px;
			}
			@media (max-width: 900px){
				/* 移动 */
				.iframe-width{
					/* position: absolute; top:50%; left:0; transform: translateY(-50%); 
					margin: unset; */
					width: 100%;
				}
			}
		</style>
	</head>
	<body>
		
		<div onclick="videoIframe()" style="color: blue;">打开弹框看iframe视频</div>
		
		<div id="myModal" class="modal">
			<div class="modal-content">
				<div id="iframeFuDiv" class="iframe-width">
					<span class="close-btn">关闭</span>
					<div class="modal-content-div">
					</div>
				</div>
			</div>
		</div>
		
		<script src="jquery-2.2.0.min.js"></script>
		<script src="index.js"></script>
		
	</body>
</html>

二、创建 index.js

window.onload = function(){
	// 打开弹框( class="open-btn" )
	$(document).delegate('.open-btn','click',function(e){
		document.getElementById("myModal").style.display = "block"; 
	})
	// 关闭弹框( class="close-btn" )
	$(document).delegate('.close-btn','click',function(e){ 
		document.getElementById("myModal").style.display = "none";  
		$(".modal-content-div").html('')  // 关闭后清除视频
	})
	// 点击空白区域关闭弹框
	const myModal = document.getElementById('myModal');
	myModal.addEventListener('click', function(event) {
		if (event.target === myModal) { 
			myModal.style.display = 'none' 
			$(".modal-content-div").html('')  // 关闭后清除视频
		}
	});
}


// iframe视频弹框播放
function videoIframe(){
	let videoUrl = '//player.bilibili.com/player.html?isOutside=true&aid=113331050385027&bvid=BV144CDYzESY&cid=26355240647&p=1'
	let html = `
		<iframe id="videoIframe" height="506" width="900"  src="${videoUrl}" frameborder=0 allowfullscreen></iframe>
	`
	$(".modal-content-div").html(html)
	// 这个需要加上
	$('iframe').wrap('<div class="iframe"></div>')
	document.getElementById("myModal").style.display = "block"
}

参考链接:
格林威治:网站引入iframe视频,如何实现宽度高度自适应?
https://www.cnblogs.com/zsmj001/p/17210837.html


http://www.kler.cn/a/373191.html

相关文章:

  • AI-基本概念-多层感知器模型/CNN/RNN/自注意力模型
  • C++第4课——swap、switch-case-for循环(含视频讲解)
  • SAM2的Hiera作为backbone,用ptflops和thop打印的模型参数量差异巨大的可能原因
  • 使用 Axios 上传大文件分片上传
  • 爬虫+数据保存2
  • 2020年下半年网络规划设计师上午真题及答案解析
  • Unity控制物体透明度的改变
  • Matplotlib 网格线
  • PostgreSQL 删除角色
  • 面向对象高级-static
  • 为什么选择 Spring data hadoop
  • 蓝牙BLE开发——红米手机无法搜索蓝牙设备?
  • 编程小白如何成为大神?大学新生的最佳入门攻略
  • QT 12.自定义信号、信号emit、信号参数注册_ev
  • 【Python · Pytorch】人工神经网络 ANN(中)
  • Agile敏捷方法
  • 内存马浅析
  • 关于深度学习方向学习的一些建议
  • 计算机低能儿从0刷leetcode | 33.搜索旋转排列数组
  • 10.30Python_异常文件操作json正则
  • 12. MapReduce全局计数器
  • Vue3实现地球上加载柱体
  • 如何将 Excel 数据转换为 SQL 脚本:从入门到实战
  • C# 将批量图片转为PDF文件
  • ts:模块导入、导出的简单使用(export、import)
  • 【Vue3】第二篇