jquery - Embedding a youtube video on page using javascript - Stack Overflow

admin管理员组

文章数量:1287984

I'm trying to embed a video on my page via a javascript property :

value: "<iframe title='YouTube video player' type=\"text/html\" width='640' height='390 src=''frameborder='0' allowFullScreen></iframe>"

But when I display this value within the browser the text is displayed instead of the youtube video :

I'm trying to embed a video on my page via a javascript property :

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

But when I display this value within the browser the text is displayed instead of the youtube video :

• javascript
• jquery
• youtube

Share Improve this question Follow edited Feb 27, 2014 at 10:59 Java_User 1,32133 gold badges2727 silver badges3838 bronze badges asked Feb 27, 2014 at 10:56 blue-skyblue-sky 53.9k159159 gold badges465465 silver badges780780 bronze badges 3

• 3 How do you add this property/value to the HTML document? – Flixer Commented Feb 27, 2014 at 10:59
• 1 Need to see more of your code..looks like you're missing a script tag or something of the sort.. – Dory Zidon Commented Feb 27, 2014 at 11:00
• I cant help but wonder why you're doing this? – Alex Commented Feb 27, 2014 at 11:01

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

You can use two options that are shared here:

• use document.write:

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

DEMO

• Use Div and append html using jQuery:

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

DEMO

This works for me:

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

Btw.: You missed a ' caracter after the height='390.

If you have a specific part of the page, you can add via id or class... id being the simplest... e.g. to insert in a div with id of header:

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

Use a div tag with id say panel.

Then append this value using jquery like this: $('div#panel').html('[obj.value]');.

本文标签： jqueryEmbedding a youtube video on page using javascriptStack Overflow