CODEWITHSUNDEEP
javascriptjqueryhtmlcssiframe
Nesh
Nesh

Reputation: 2541

Iframe not embedding in a div using jQuery

I am facing a weird issue with jQuery append() method. I want to append a container containing iframe in a div but somehow its not working, though If instead of appending a div containing iframe, if I replace this with any other normal div its working fine.

Jquery/JavaScript code -

var imageURL = 'https://www.youtube.com/embed/zZasH6qkn8M';
var setWidth = '90%';
var setHeight = '211px';
var iframeContainer = '<div id="iframecontainer" style="position: relative;left: 50%;border: 0;top: 50%;transform: translate(-50%, -50%)">'+'<iframe id="ytFrameId" class="ytClassa" width="' + setWidth + '" height="' + setHeight + '" src="' + imageURL +'></iframe>'+'</div>';

//var iframeContainer = '<div id="retro">This is retro</div>';
$('#test').append(iframeContainer);

Let me know what I am doing wrong with my approach.

Fiddle - https://jsfiddle.net/vo4cg8o3/

Upvotes: 1

Views: 68

Answers (3)

epascarello
epascarello

Reputation: 207501

You never close the attribute for the src

 ... src="' + imageURL +'></iframe>'+'</div>';
         ^
         open but not closed

Upvotes: 1

Pabs123
Pabs123

Reputation: 3435

you're missing a closing quote at the end of the src attribute, try:

var iframeContainer = '<div id="iframecontainer" style="position: relative;left: 50%;border: 0;top: 50%;transform: translate(-50%, -50%)">'+'<iframe id="ytFrameId" class="ytClassa" width="' + setWidth + '" height="' + setHeight + '" src="' + imageURL +'"></iframe>'+'</div>';

Here it is working

Upvotes: 1

Deepak Mallah
Deepak Mallah

Reputation: 4076

Try this simple javascript code. instead of .append use .html

$(document).ready(function() {
    $("#test").html("<iframe src='http://jsfiddle.net'></iframe>");  
});

Upvotes: -1

Related Questions