使用javascript在页面上嵌入YouTube视频

Question

我正在尝试通过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视频：

Answer 1

这对我有用：

<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个字符。

Answer 2

使用div标记id说panel。

然后使用jquery附加此值，如下所示：$('div#panel').html('[obj.value]');。

Answer 3

如果你有页面的特定部分，你可以通过id或class ... id添加最简单的...例如插入id为header的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>

Answer 4

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

• 使用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