当前位置： 首页 > news >正文

iframe视频宽度高度自适应（ pc+移动都可以用，jq写法 ）

news 2025/11/4 22:10:48

注意：要引入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

相关文章：

iframe视频宽度高度自适应（ pc+移动都可以用，jq写法 ）

注意&#xff1a;要引入jquery 可以直接使用弹框播放iframe 一、创建 index.html <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><style>.modal {/* 默认隐藏 */display: none;position: fixed;z-i…...

编程日记 2024/11/4 5:25:29

Observability：OpenTelemetry Elastic 分发简介

作者&#xff1a;来自 Elastic Alexander Wert•Miguel Luna•Bahubali Shetti Elastic 自豪地推出了 Elastic Distributions of OpenTelemetry (EDOT)&#xff0c;其中包含 Elastic 版本的 OpenTelemetry Collector 和多种语言 SDK&#xff0c;如 Python、Java、.NET 和 NodeJ…...

编程日记 2024/11/4 5:22:25

golang的RSA加密解密

参考&#xff1a;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…...

编程日记 2024/11/4 5:21:24

深度学习-梯度消失/爆炸产生的原因、解决方法

在深度学习模型中&#xff0c;梯度消失和梯度爆炸现象是限制深层神经网络有效训练的主要问题之一&#xff0c;这两个现象从本质上来说是由链式求导过程中梯度的缩小或增大引起的。特别是在深层网络中&#xff0c;若初始梯度在反向传播过程中逐层被放大或缩小&#xff0c;最后导…...

编程日记 2024/11/4 5:20:23

MVC（Model-View-Controller）模式概述

MVC&#xff08;Model-View-Controller&#xff09;是一种设计模式&#xff0c;最初由 Trygve Reenskaug 在 1970 年代提出&#xff0c;并在 Smalltalk 编程环境中得到了广泛应用。MVC 模式旨在实现用户界面和业务逻辑的分离&#xff0c;以增强应用程序的可维护性、可扩展性和复…...

编程日记 2024/11/4 5:18:21

数据结构 —— 红黑树

目录 1. 初识红黑树 1.1 红黑树的概念 1.2 红⿊树的规则 1.3 红黑树如何确保最长路径不超过最短路径的2倍 1.4 红黑树的效率:O(logN) 2. 红黑树的实现 2.1 红黑树的基础结构框架 2.2 红黑树的插⼊ 2.2.1 情况1&#xff1a;变色 2.2.2 情况2&#xff1a;单旋变色 2.2…...

编程日记 2024/11/4 5:17:19

《功能高分子学报》

《功能高分子学报》 中国标准连续出版物号:CN 31-1633/O6&#xff0c;国际标准连续出版物号&#xff1a;ISSN 1008-9357&#xff0c;邮发代号&#xff1a;4-629&#xff0c;刊期&#xff1a;双月刊。 《功能高分子学报》主要刊登功能高分子和其他高分子领域具有创新意义的学术…...

编程日记 2024/11/4 5:16:18

Linux特种文件系统--tmpfs文件系统

tmpfs类似于RamDisk&#xff08;只能使用物理内存&#xff09;&#xff0c;使用虚拟内存&#xff08;简称VM&#xff09;子系统的页面存储文件。tmpfs完全依赖VM&#xff0c;遵循子系统的整体调度策略。说白了tmpfs跟普通进程差不多&#xff0c;使用的都是某种形式的虚拟内存&a…...

编程日记 2024/11/4 5:14:16

《基于STMF103的FreeRTOS内核移植》

目录 1.FreeRTOS资料下载与出处 1.1官网下载&#xff0c;网址&#xff1a;www.freertos.org 1.2在正点原子官网&#xff0c;任意STM32F1的开发板资料A盘里&#xff0c; 2.FreeRTOS移植重要文件讲解 2.1 FreeRTOS与FreeRTOS-Plus文件夹 2.2 Demo、Lincence、Source ●Demo文件…...

编程日记 2024/11/4 5:10:12

一七二、Vue3性能优化方式

Vue 3 的性能优化相较于 Vue 2 有了显著提升&#xff0c;利用新特性和改进方法可以更高效地构建和优化应用。以下是 Vue 3 的常见性能优化方法及示例。 1. 使用组合式 API (Composition API) Vue 3 引入的组合式 API&#xff0c;通过逻辑拆分和复用来实现更高效的代码组织和性…...

编程日记 2024/11/4 5:09:11

软件测试--BUG篇

博主主页: 码农派大星. 数据结构专栏:Java数据结构 数据库专栏:MySQL数据库 JavaEE专栏:JavaEE 软件测试专栏:软件测试 关注博主带你了解更多知识 目录 1. 软件测试的⽣命周期 2. BUG 1. BUG 的概念 2. 描述bug的要素 3.bug级别 4.bug的⽣命周期 5 与开发产⽣争执怎…...

编程日记 2024/11/4 5:04:05

Scikit-learn和Keras简介

一&#xff0c;Scikit-learn是一个开源的机器学习库&#xff0c;用于Python编程语言。它建立在NumPy、SciPy和matplotlib这些科学计算库之上&#xff0c;提供了简单有效的数据挖掘和数据分析工具。Scikit-learn库包含了许多用于分类、回归、聚类和降维的算法&#xff0c;包括支…...

编程日记 2024/11/4 5:02:03

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…...

编程日记 2024/11/4 5:01:02

Java面试题十四

一、Java中的JNI&#xff08;Java Native Interface&#xff09;是什么&#xff1f;它有什么用途&#xff1f; Java中的JNI&#xff08;Java Native Interface&#xff09;是Java提供的一种编程框架&#xff0c;它允许Java代码与本地&#xff08;Native&#xff09;代码&#x…...

编程日记 2024/11/4 4:59:00

yarn : 无法加载文件，未对文件 进行数字签名。无法在当前系统上运行该脚本。

执行这个命令时报错&#xff1a;yarn --registryhttps://registry.npm.taobao.org yarn : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\yarn.ps1。未对文件 C:\Users\Administ rator\AppData\Roaming\npm\yarn.ps1 进行数字签名。无法在当前系统上运行该脚本。有…...

编程日记 2024/11/4 4:56:58

Hadoop——HDFS

什么是HDFS HDFS&#xff08;Hadoop Distributed File System&#xff09;是Apache Hadoop的核心组件之一&#xff0c;是一个分布式文件系统&#xff0c;专门设计用于在大规模集群上存储和管理海量数据。它的设计目标是提供高吞吐量的数据访问和容错能力&#xff0c;以支持大数…...

编程日记 2024/11/4 4:55:57

计算机的一些基础知识

文章目录 编程语言 程序 所谓程序&#xff0c;就是 一组指令 以及 这组指令要处理的数据。狭义上来说&#xff0c;程序对我们来说&#xff0c;通常表现为一组文件。 程序 指令 指令要处理的数据。 编程语言发展 机器语言&#xff1a;0、1 二进制构成汇编语言&#xff1a;…...

编程日记 2024/11/4 4:54:56

学习RocketMQ（记录了个人艰难学习RocketMQ的笔记）

一、部署单点RocketMQ Docker 部署 RocketMQ (图文并茂超详细)_docker 部署rocketmq-CSDN博客 这个博主讲的很好&#xff0c;可食用&#xff0c;替大家实践了一遍 二、原理篇 为什么使用RocketMQ&#xff1a; 为什么选择RocketMQ | RocketMQ 关于一些原理&#xff0c;感觉…...

编程日记 2024/11/4 4:53:55

【设计模式】策略模式定义及其实现代码示例

文章目录 一、策略模式1.1 策略模式的定义1.2 策略模式的参与者1.3 策略模式的优点1.4 策略模式的缺点1.5 策略模式的使用场景 二、策略模式简单实现2.1 案例描述2.2 实现代码 三、策略模式的代码优化3.1 优化思路3.2 抽象策略接口3.3 上下文3.4 具体策略实现类3.5 测试 参考资…...

编程日记 2024/11/4 4:52:54

list与iterator的之间的区别，如何用斐波那契数列探索yield

问题 list与iterator的之间的区别是什么&#xff1f;如何用斐波那契数列探索yield&#xff1f; 2 方法 将数据转换成list,通过对list索引和切片操作&#xff0c;以及可以进行添加、删除和修改元素。 iterator是一种对象&#xff0c;用于遍历可迭代对象&#xff08;如列表、元组…...

编程日记 2024/11/4 4:51:53

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/10/24 14:20:29

突破不可导策略的训练难题：零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

编程新知 2025/10/30 22:35:49

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

编程新知 2025/9/17 19:16:20

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

编程新知 2025/8/5 19:18:33

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

编程新知 2025/11/1 4:12:04

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

编程新知 2025/11/2 3:43:40

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

编程新知 2025/11/3 0:36:59

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

编程新知 2025/10/25 21:14:56

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...

编程新知 2025/10/2 9:17:52

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

编程新知 2025/11/2 13:18:58