CODEWITHSUNDEEP
jqueryhtml
Brad
Brad

Reputation: 12262

append id value to iframe src attribute

I am trying to append the value of the id of the image link the user clicks, to the iframe src to display the video to the user can play it.

I am able to capture the value from the id, but I don't know how to pass it dynamically to the iframe src

http://jsfiddle.net/V4ehv/

$(".play-video").click(function() {
    alert("http://www.youtube.com/embed/" + this.id);

    // append the id code into the iframe src=""
});

<div class="video-item">
   <a href="#" class="play-video" id="B-5c8Z-I_x4"><img src="http://img.youtube.com/vi/B-5c8Z-I_x4/1.jpg"></a>
   <br />10/15/2014                            
</div><!-- ./video-item -->

<div class="video-item">
   <a href="#" class="play-video" id="kLRVk-rt1kg"><img src="http://img.youtube.com/vi/kLRVk-rt1kg/1.jpg"></a>
   <br />10/15/2014                            
</div><!-- ./video-item -->

<iframe width="400" height="225" src="" class="user-picked-video" frameborder="0" allowfullscreen></iframe>

Upvotes: 0

Views: 2331

Answers (2)

CodeToad
CodeToad

Reputation: 4724

with plain JavaScript its just:

  var myIframe= document.getElementById('myIframe');

  myIframe.src = "http://www.youtube.com/embed/" + myIframe.id;

Upvotes: 1

Satpal
Satpal

Reputation: 133403

Just use .attr() to set src of iframe

$('iframe.user-picked-video').attr('src', "http://www.youtube.com/embed/" + this.id)

DEMO

Upvotes: 2

Related Questions