Changing YouTube iframe src using JQuery

Question

I am building a video player page. I load an iframe and other videos associated with a YouTube channel using Ajax. I am trying to change the iframe src using the onclick event on a number of anchors, however the onclick event doesn't seem to execute given my code.

Ajax Generated HTML

	    
    $('.play-video').on('click',function(){
    	
    	$('#video-view iframe').attr('src', $(this).data('src'));
    	$('#video-title').text($(this).data('title'));
    	$('#video-description').text($(this).data('description'));
    	
    	$('html, body').animate({
            scrollTop: $('#video-viewer').offset().top
        }, 2000);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vid-youtube">
    	 <div class="video" id="video-viewer">
    		<iframe name="youtube_player" width="560" height="250" frameborder="0" src="//www.youtube.com/embed/8VYX4jDH63c?theme=light&amp;color=red&amp;showinfo=0" allowfullscreen="true"></iframe>
    	</div>
    	<div class="col-md-12" style="padding: 20px;">
    		<h4 id="video-title">Born Depressed(take 1) - Jimquisition Intro Theme Sax Cover</h4>
    		<p id="video-description">Born Depressed by Drill Queen with Live Sax</p>
    		<hr>
    	</div>						  					
    	
    	<div style="padding: 20px !important;">
    		<div class="row videos-list">
    			<div class="col-sm-3 col-xs-6">			
    				<div class="item active">	
    					<a href="#" style="color: #565a5c" class="play-video" data-src="//www.youtube.com/embed/8VYX4jDH63c?autoplay=1&amp;theme=light&amp;color=red&amp;showinfo=0" data-description="Born Depressed by Drill Queen with Live Sax">	                  			                  		
    						<img src="https://i.ytimg.com/vi/8VYX4jDH63c/mqdefault.jpg" >
    						Born Depressed(Take 1) 
    					</a>
    				</div>
    			</div>
    			<div class="col-sm-3 col-xs-6">			
    				<div class="item ">	
    					<a href="#" style="color: #565a5c" class="play-video" data-src="//www.youtube.com/embed/L-rAHwcCb4k?autoplay=1&amp;theme=light&amp;color=red&amp;showinfo=0" data-description="Born Depressed by Drill Queen with Live Sax, Drums" data-title="Get Lucky - Daft Punk">	                  			                  		
    						<img src="https://i.ytimg.com/vi/L-rAHwcCb4k/mqdefault.jpg">
    						Get Lucky - Daft Punk
    					</a >
    				</div>
    			</div>
    		</div>
    	</div>
    </div>

It worked for me. You just put the wrong id #video-view iframe , it should be #video-viewer iframe . — Rahul Dev
– Rahul Dev, Commented Feb 22, 2018 at 8:19

Barskey · Accepted Answer · 2018-02-22 08:29:54Z

1

.on() works on dynamically created elements if used with the following syntax:

$(document).on('click', '<selector>', function() {});

$(document).on('click', '.play-video', function() { 
  $('#video-viewer iframe').attr('src', $(this).data('src'));
  $('#video-title').text($(this).data('title'));
  $('#video-description').text($(this).data('description'));

  $('html, body').animate({
    scrollTop: $('#video-viewer').offset().top
  }, 2000);
});

edited Feb 22, 2018 at 8:29

answered Feb 22, 2018 at 8:13

Barskey

4632 gold badges5 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Changing YouTube iframe src using JQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related