iframe视频宽度高度自适应（ pc+移动都可以用，jq写法 ）
注意：要引入jquery
可以直接使用弹框播放iframe
一、创建 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
相关文章：
iframe视频宽度高度自适应（ pc+移动都可以用，jq写法 ）
注意：要引入jquery 可以直接使用弹框播放iframe 一、创建 index.html <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><style>.modal {/* 默认隐藏 */display: none;position: fixed;z-i…...
Observability：OpenTelemetry Elastic 分发简介
作者：来自 Elastic Alexander Wert•Miguel Luna•Bahubali Shetti Elastic 自豪地推出了 Elastic Distributions of OpenTelemetry (EDOT)，其中包含 Elastic 版本的 OpenTelemetry Collector 和多种语言 SDK，如 Python、Java、.NET 和 NodeJ…...
golang的RSA加密解密
参考：https://blog.csdn.net/lady_killer9/article/details/118026802 1.加密解密工具类PasswordUtil.go package utilimport ("crypto/rand""crypto/rsa""crypto/x509""encoding/pem""fmt""log"&qu…...
深度学习-梯度消失/爆炸产生的原因、解决方法
在深度学习模型中，梯度消失和梯度爆炸现象是限制深层神经网络有效训练的主要问题之一，这两个现象从本质上来说是由链式求导过程中梯度的缩小或增大引起的。特别是在深层网络中，若初始梯度在反向传播过程中逐层被放大或缩小，最后导…...
MVC（Model-View-Controller）模式概述
MVC（Model-View-Controller）是一种设计模式，最初由 Trygve Reenskaug 在 1970 年代提出，并在 Smalltalk 编程环境中得到了广泛应用。MVC 模式旨在实现用户界面和业务逻辑的分离，以增强应用程序的可维护性、可扩展性和复…...
数据结构 —— 红黑树
目录 1. 初识红黑树 1.1 红黑树的概念 1.2 红⿊树的规则 1.3 红黑树如何确保最长路径不超过最短路径的2倍 1.4 红黑树的效率:O(logN) 2. 红黑树的实现 2.1 红黑树的基础结构框架 2.2 红黑树的插⼊ 2.2.1 情况1：变色 2.2.2 情况2：单旋变色 2.2…...
《功能高分子学报》
《功能高分子学报》 中国标准连续出版物号:CN 31-1633/O6，国际标准连续出版物号：ISSN 1008-9357，邮发代号：4-629，刊期：双月刊。 《功能高分子学报》主要刊登功能高分子和其他高分子领域具有创新意义的学术…...
Linux特种文件系统--tmpfs文件系统
tmpfs类似于RamDisk（只能使用物理内存），使用虚拟内存（简称VM）子系统的页面存储文件。tmpfs完全依赖VM，遵循子系统的整体调度策略。说白了tmpfs跟普通进程差不多，使用的都是某种形式的虚拟内存&a…...
《基于STMF103的FreeRTOS内核移植》
目录 1.FreeRTOS资料下载与出处 1.1官网下载，网址：www.freertos.org 1.2在正点原子官网，任意STM32F1的开发板资料A盘里， 2.FreeRTOS移植重要文件讲解 2.1 FreeRTOS与FreeRTOS-Plus文件夹 2.2 Demo、Lincence、Source ●Demo文件…...
一七二、Vue3性能优化方式
Vue 3 的性能优化相较于 Vue 2 有了显著提升，利用新特性和改进方法可以更高效地构建和优化应用。以下是 Vue 3 的常见性能优化方法及示例。 1. 使用组合式 API (Composition API) Vue 3 引入的组合式 API，通过逻辑拆分和复用来实现更高效的代码组织和性…...
软件测试--BUG篇
博主主页: 码农派大星. 数据结构专栏:Java数据结构 数据库专栏:MySQL数据库 JavaEE专栏:JavaEE 软件测试专栏:软件测试 关注博主带你了解更多知识 目录 1. 软件测试的⽣命周期 2. BUG 1. BUG 的概念 2. 描述bug的要素 3.bug级别 4.bug的⽣命周期 5 与开发产⽣争执怎…...
Scikit-learn和Keras简介
一，Scikit-learn是一个开源的机器学习库，用于Python编程语言。它建立在NumPy、SciPy和matplotlib这些科学计算库之上，提供了简单有效的数据挖掘和数据分析工具。Scikit-learn库包含了许多用于分类、回归、聚类和降维的算法，包括支…...
python在word的页脚插入页码
1、插入简易页码 import win32com.client as win32 from win32com.client import constants import osdoc_app win32.gencache.EnsureDispatch(Word.Application)#打开word应用程序 doc_app.Visible Truedoc doc_app.Documents.Add() footer doc.Sections(1).Footers(cons…...
Java面试题十四
一、Java中的JNI（Java Native Interface）是什么？它有什么用途？ Java中的JNI（Java Native Interface）是Java提供的一种编程框架，它允许Java代码与本地（Native）代码&#x…...
yarn : 无法加载文件，未对文件 进行数字签名。无法在当前系统上运行该脚本。
执行这个命令时报错：yarn --registryhttps://registry.npm.taobao.org yarn : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\yarn.ps1。未对文件 C:\Users\Administ rator\AppData\Roaming\npm\yarn.ps1 进行数字签名。无法在当前系统上运行该脚本。有…...
Hadoop——HDFS
什么是HDFS HDFS（Hadoop Distributed File System）是Apache Hadoop的核心组件之一，是一个分布式文件系统，专门设计用于在大规模集群上存储和管理海量数据。它的设计目标是提供高吞吐量的数据访问和容错能力，以支持大数…...
计算机的一些基础知识
文章目录 编程语言 程序 所谓程序，就是 一组指令 以及 这组指令要处理的数据。狭义上来说，程序对我们来说，通常表现为一组文件。 程序 指令 指令要处理的数据。 编程语言发展 机器语言：0、1 二进制构成汇编语言：…...
学习RocketMQ（记录了个人艰难学习RocketMQ的笔记）
一、部署单点RocketMQ Docker 部署 RocketMQ (图文并茂超详细)_docker 部署rocketmq-CSDN博客 这个博主讲的很好，可食用，替大家实践了一遍 二、原理篇 为什么使用RocketMQ： 为什么选择RocketMQ | RocketMQ 关于一些原理，感觉…...
【设计模式】策略模式定义及其实现代码示例
文章目录 一、策略模式1.1 策略模式的定义1.2 策略模式的参与者1.3 策略模式的优点1.4 策略模式的缺点1.5 策略模式的使用场景 二、策略模式简单实现2.1 案例描述2.2 实现代码 三、策略模式的代码优化3.1 优化思路3.2 抽象策略接口3.3 上下文3.4 具体策略实现类3.5 测试 参考资…...
list与iterator的之间的区别，如何用斐波那契数列探索yield
问题 list与iterator的之间的区别是什么？如何用斐波那契数列探索yield？ 2 方法 将数据转换成list,通过对list索引和切片操作，以及可以进行添加、删除和修改元素。 iterator是一种对象，用于遍历可迭代对象（如列表、元组…...
DeOldify图像上色服务性能调优：针对STM32嵌入式设备输出的图像优化
DeOldify图像上色服务性能调优：针对STM32嵌入式设备输出的图像优化 你有没有想过，把家里那些泛黄的老照片，用AI技术一键上色后，直接显示在复古的电子相框里？这个想法听起来很酷，但实际操作起来，…...
干货合集：AI论文网站深度测评与推荐2026最新版
2026年真正好用的AI论文网站，核心看生成的论文质量、低AI味、格式正确、学术适配四大指标。综合实测，千笔AI、ThouPen、豆包、DeepSeek、Grammarly 是当前最值得推荐的梯队，覆盖从免费到付费、从中文到英文、从文科到理工的全场景需求。 一、…...
ROG游戏本色彩修复与配置还原完全指南
ROG游戏本色彩修复与配置还原完全指南 【免费下载链接】g-helper Lightweight Armoury Crate alternative for Asus laptops. Control tool for ROG Zephyrus G14, G15, G16, M16, Flow X13, Flow X16, TUF, Strix, Scar and other models 项目地址: https://gitcode.com/Git…...
从PERCLOS到‘三庭五眼’：聊聊疲劳检测算法里那些有趣的工程实现细节
从PERCLOS到‘三庭五眼’：疲劳检测算法的工程实现艺术 当算法工程师第一次看到"三庭五眼"这个美术概念被写入代码注释时，大概都会会心一笑——这正是工程实践中那些有趣的跨界融合时刻。疲劳检测系统看似是标准的计算机视觉任务，但…...
从异或到AES：Java类文件加密的3种实现方式对比（含性能测试）
从异或到AES：Java类文件加密的3种实现方式对比（含性能测试） 在Java开发领域，代码保护始终是开发者关注的焦点。当项目涉及商业机密或核心算法时，防止class文件被反编译成为刚需。本文将深入剖析三种不同安全级别的clas…...
在语音对话中，OpenClaw 的语音唤醒词定制化如何实现？
语音唤醒词定制化这件事，听起来像是给机器一个专属的暗号，喊对了它才搭理你。在OpenClaw这类语音对话系统里，实现这个功能，本质上是在解决一个“如何在嘈杂的声音环境里，准确识别出某个特定词汇”的问题。 这和我们平时…...
网页时光机：如何用浏览器扩展拯救消失的互联网记忆
网页时光机：如何用浏览器扩展拯救消失的互联网记忆 【免费下载链接】wayback-machine-webextension A web browser extension for Chrome, Firefox, Edge, and Safari 14. 项目地址: https://gitcode.com/gh_mirrors/wa/wayback-machine-webextension 当你精…...
大数据环境下数据仓库的自动化运维实践
大数据环境下数据仓库的自动化运维实践 关键词：大数据、数据仓库、自动化运维、实践、效率提升 摘要：本文围绕大数据环境下数据仓库的自动化运维实践展开。首先介绍了大数据环境和数据仓库自动化运维的背景知识，接着详细解释了相关核心概念及其关系，阐述了自动化运维的核心…...
UniApp静态资源分包实战：除了图片500错误，你的分包策略真的优化到位了吗？
UniApp静态资源分包深度优化：从500报错到全平台兼容方案 在UniApp开发中，随着项目规模扩大，静态资源管理逐渐成为性能优化的关键瓶颈。许多开发者初次接触分包策略时，往往只关注基础配置而忽略资源加载的深层逻辑，直到…...
墨语灵犀GPU算力适配指南：A10/A100/V100显卡部署性能与显存占用实测
墨语灵犀GPU算力适配指南：A10/A100/V100显卡部署性能与显存占用实测 1. 引言：当古典美学遇见现代算力 想象一下，你正在处理一份重要的海外文献，或者需要将一段优美的中文诗歌翻译成英文。你希望翻译结果不仅准确，更要…...