使用 javascript 在页面上嵌入 youtube 视频答案

【问题标题】：Embedding a youtube video on page using javascript使用 javascript 在页面上嵌入 youtube 视频
【发布时间】：2014-02-27 10:56:47
【问题描述】：

我正在尝试通过 javascript 属性在我的页面上嵌入视频：

value: "<iframe title='YouTube video player' type=\"text/html\" width='640' height='390 src='http://www.youtube.com/embed/W-Q7RMpINVo'frameborder='0' allowFullScreen></iframe>"

但是当我在浏览器中显示这个值时，显示的是文本而不是 youtube 视频：

【问题讨论】：

如何将此属性/值添加到 HTML 文档中？
需要查看更多代码......看起来你缺少脚本标签或类似的东西......
我不禁想知道你为什么要这样做？

标签： javascript jquery youtube

【解决方案1】：

您可以使用此处共享的两个选项：

使用document.write:

var obj = {"video": {
  "value": "<iframe title='YouTube video player' type=\"text/html\" width='640' height='390' src='http://www.youtube.com/embed/W-Q7RMpINVo' frameborder='0' allowFullScreen></iframe>"
}}
document.write(obj.video.value);

DEMO

使用 Div 并使用 jQuery 附加 html：

var obj = {"video": {
"value": "<iframe title='YouTube video player' type=\"text/html\" width='640'  
height='390' src='http://www.youtube.com/embed/W-Q7RMpINVo' frameborder='0' 
 allowFullScreen></iframe>"
}}

$("#test").html(obj.video.value);


<div id="test"></div>

DEMO

【讨论】：

【解决方案2】：

这对我有用：

<script>
    document.write("<iframe title='YouTube video player' type=\"text/html\" width='640' height='390' src='http://www.youtube.com/embed/W-Q7RMpINVo'frameborder='0' allowFullScreen></iframe>";
</script>

顺便说一句：你在height='390 后面漏掉了一个' 字符。

【讨论】：

【解决方案3】：

如果您有页面的特定部分，您可以通过 id 或类添加... id 是最简单的...例如插入带有标题 id 的 div：

<script>
  document.getElementById('header').innerHTML = "<iframe title='YouTube video player'   type=\'text/html\' width='640' height='390' src='http://www.youtube.com/embed/W-Q7RMpINVo' frameborder='0' allowFullScreen></iframe>"
</script>

【讨论】：

【解决方案4】：

使用div 标记和id 说panel。

然后像这样使用 jquery 附加这个值：$('div#panel').html('[obj.value]');。

【讨论】：