各位站长大佬，先别急着给WordPress镶金边，今天咱老王用一口“小目标”的腔调，跟你唠唠：怎么让iframe在WordPress里像钱包一样——鼓的时候能撑，瘪的时候能缩，绝不卡用户的脸，也不掉咱的身价。
想当年，我请欧洲设计师给公司官网加了个酷炫的3D地图iframe，结果手机一打开，嚯，地图横着躺，把首页直接撑成“大脸盘”，用户当场劝退。我拍桌子：这哪行？得让人家像看钱包余额一样，一眼舒服！于是我连夜把技术小哥薅过来，甩给他三个锦囊，第二天，iframe就学会了“自适应”。现在，我把这三个锦囊公开，不收版权费，只收你们一个点赞。
锦囊一：给iframe套“松紧腰带”
把下面这段“松紧腰带”代码扔进主题根目录的functions.php里——别怕，就像往西装里缝一条橡皮筋，外表看不出来，但一弯腰就知道舒服：
function add_responsive_wrap($content) {
if (is_single() || is_page()) {
$content = preg_replace('/<\/iframe>/', '
', $content);
}
return $content;
}
add_filter('the_content', 'add_responsive_wrap');
这段正则，说白了就是给每个iframe外面套了个class叫video-container的div，相当于给它穿了条松紧裤。
锦囊二：写“伸缩咒语”——CSS
接着到主题的style.css里，贴一段咒语：
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
这段咒语的核心是padding-bottom: 56.25%，它让容器按16:9的比例自适应，iframe再绝对定位铺满，手机、平板、8K电视，通通不翻车。
锦囊三：侧边栏小工具也安排
有老板爱在侧边栏塞B站视频，结果侧边栏一窄，iframe又炸。用Shortcode解决，functions.php再来一梭子：
function responsive_iframe_shortcode($atts) {
$atts = shortcode_atts(array(
'src' => '',
'width' => '100%',
'height' => '500',
), $atts);
return '';
}
add_shortcode('responsive_iframe', 'responsive_iframe_shortcode');
以后在文章或侧边栏里写：
【responsive_iframe src="https://www.bilibili.com/video/BV1xxxxxx"】 就像发微信红包一样简单，iframe随栏宽自动伸缩，绝不让用户横屏歪脖子。
彩蛋：古腾堡区块也照杀
新版WordPress用区块？直接装个“Advanced Responsive Video Embedder”插件，搜索ARVE，一键开启responsive，啥也不用改，比我当年买万达影院还快。
总结一句话：别让iframe像固执的老伙计，该松就松，该紧就紧。网站体验上去了，用户才愿意多看你两眼——就像看余额一样，越看越上头。
———————————
教程时间：WordPress iframe自适应 超细五步实操
先备份！
进仪表盘→工具→导出，把网站先备份，免得改错哭晕。
打开functions.php
外观→主题文件编辑器→选中functions.php，拉到最下面，在最后一个 ?> 之前插入锦囊一的PHP代码，保存。
打开style.css
仍在主题文件编辑器，点style.css，在最底部空一行，粘贴锦囊二的CSS，保存。如果主题更新被覆盖，建议装“Code Snippets”插件，把CSS写进插件，更新不丢。
测试文章
新建文章，切“文本”模式，直接贴：
[/span>iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"iframe
发布，手机浏览器访问，若iframe随屏宽等比缩放，说明成功。
侧边栏/小工具
外观→小工具→自定义HTML，输入：
【responsive_iframe src="https://www.bilibili.com/video/BV1xxxxxx"】 保存。若前台仍固定高度，检查主题是否自带!important把iframe定死，必要时在style.css末尾加：
.video-container iframe { height: 100% !important; }
古腾堡懒人法
插件→安装→搜索“ARVE”→启用。以后插入视频时选ARVE区块，粘贴URL，插件自动生成响应式iframe，连代码都不用看，比叫外卖还快。
三步排错：
iframe不缩放？八成是主题自带iframe样式冲突，用浏览器F12检查iframe是否被强制写了固定width/height，用!important覆盖。
比例不对？改.video-container的padding-bottom，16:9用56.25%，4:3用75%，自己算。
视频被裁剪？给.video-container加border-radius: 8px; overflow: hidden;既防裁又美观。
照着做，你的WordPress iframe就能像我一样，随时伸缩，永远体面。
