JSFiddle可正常替换YouTube iframe URL 部署到Blogger后失效求助

• DOM加载顺序错误：你当前将脚本代码放在了<iframe>标签的上方，浏览器会从上到下逐行解析执行页面内容，运行替换src的代码时，id为ytplayer的iframe元素还没有被渲染到DOM树中，document.getElementById('ytplayer')会返回空值，赋值操作完全不生效，这是最核心的故障原因。
• 协议不匹配：你的Blogger站点为HTTPS协议，代码中用到的jQuery、YouTube资源都用了HTTP前缀，会触发浏览器的混合内容安全拦截，导致资源加载失败。
• 冗余引入了jQuery库但没有实际使用，不过这一点不影响功能生效。

方案1：调整代码顺序（最简单） #

直接把脚本代码放到iframe标签的下方，保证执行脚本时元素已经加载完成，同时把所有HTTP链接改为HTTPS：

<iframe id="ytplayer" src="https://www.youtube.com/embed/pXquZBc8td0" frameborder="0" width="640" height="480" ></iframe>
<script>
document.getElementById('ytplayer').src = "https://www.youtube.com/embed/EDk3YnVpQes";
</script>

方案2：监听DOM加载完成事件 #

如果需要把脚本放在页面头部或者iframe之前，可以监听DOM加载完成事件后再执行替换逻辑，原生JS写法如下：

<script>
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('ytplayer').src = "https://www.youtube.com/embed/EDk3YnVpQes";
});
</script>
<iframe id="ytplayer" src="https://www.youtube.com/embed/pXquZBc8td0" frameborder="0" width="640" height="480" ></iframe>

方案3：使用已引入的jQuery实现 #

如果你需要保留jQuery引入，可以直接用jQuery的语法实现相同逻辑：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $('#ytplayer').attr('src', 'https://www.youtube.com/embed/EDk3YnVpQes');
});
</script>
<iframe id="ytplayer" src="https://www.youtube.com/embed/pXquZBc8td0" frameborder="0" width="640" height="480" ></iframe>

在Blogger后台编辑文章时，必须切换到「HTML视图」再粘贴代码，不要在「撰写视图」下操作，否则编辑器会自动转义代码中的特殊字符，导致脚本无法正常解析执行。

内容的提问来源于stack exchange，提问作者SmartestVEGA