CODEWITHSUNDEEP
javascriptjqueryyoutube
blue-sky
blue-sky

Reputation: 53906

Embedding a youtube video on page using javascript

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.com/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 :

enter image description here

Upvotes: 4

Views: 20460

Answers (4)

Guruprasad
Guruprasad

Reputation: 1

Use a div tag with id say panel.

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

Upvotes: 0

Kiran
Kiran

Reputation: 20303

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.com/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.com/embed/W-Q7RMpINVo' frameborder='0' 
 allowFullScreen></iframe>"
}}

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


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

DEMO

Upvotes: 3

nick.with.a.z
nick.with.a.z

Reputation: 1

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.com/embed/W-Q7RMpINVo' frameborder='0' allowFullScreen></iframe>"
</script>

Upvotes: 0

Werner
Werner

Reputation: 2154

This works for me:

<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>

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

Upvotes: 1

Related Questions