Changing and loading an iframe ‘src’ attribute with jQuery

Question

I'm very new to jQuery and quite rusty with my web design in general. I have a page on my site with 12 buttons alongside an iframe which is embedded from live stream website showing videos. All I want is for each of the buttons to load a different video from this site into the iframe without simply reloading the whole page. I've searched and seen some examples of jQuery interaction with iframes, but all too complex for me to fully follow. Could someone please provide a simple example of what I need to do? I just need jQuery to change the src value and reload the iframe when the user clicks on one of the buttons.

Here is the code I'm playing with

<div id="chanelShowEmbed" class="embed-responsive">
      <iframe id="chanelShow" class="embed-responsive-item" src="chanel1 url" onLoad='$("#popLoad").fadeOut("slow");' allowfullscreen>  </iframe>
    </div>
  <div class="col  m-auto"> <img id="channel1" class="chanel" src="image url"> </div>
          <div class="col  m-auto"> <img id="channel2" class="chanel" src="image url"> </div>
          <div class="col  m-auto"> <img id="channel3" class="chanel" src="image url"> </div>
          <div class="col  m-auto"> <img id="channel4" class="chanel" src="image url"> </div>
          <div class="col  m-auto"> <img id="channel5" class="chanel" src="image url"> </div>
          <div class="col  m-auto"> <img id="channel6" class="chanel" src="image url"> </div>
          <div class="col  m-auto"> <img id="channel7" class="chanel" src="image url"> </div>
          <div class="col  m-auto"> <img id="channel8" class="chanel" src="image url"> </div>
          <div class="col  m-auto"> <img id="channel9" class="chanel" src="image url"> </div>
          <div class="col  m-auto"> <img id="channel10" class="chanel" src="image url"> </div>
          <div class="col  m-auto"> <img id="channel11" class="chanel" src="image url"> </div>
          <div class="col  m-auto"> <img id="channel12" class="chanel" src="image url"> </div>

JS code

var listChanels = {
    "channel1":"channel url",

    "channe2":"channel url",

    "channe3":"channel url",
    "channe4":"channel url",
    "channe5":"channel url",
    "channe6":"channel url",
    "channe7":"channel url",
    "channe8":"channel url",
    "channe9":"channel url",
    "channel0":"channel url",
    "channel1":"channel url",
    "channel2":"channel url",

What am I missing here?

Any help would be greatly appreciated.

Thanks.

brianyates · Accepted Answer · 2018-04-19 17:51:21Z

1

It might make sense to assign a data attribute to each button, where the data-src is the source url you want to assign to the iframe upon clicking.

So the HTML would look something like this...

<img class="channel" data-src="your Channel Source" src="image source"></img>

Then when the user clicks the image, you could assign a jQuery listener to assign the source from the data attribute to the iframe like so...

$('.channel').click(function(){
  var s = $(this).data('src');
  $('#channelShow').attr('src', s);
});

Please note that I added an 'n' to your class and id names because I wanted to spell channel correctly :)

answered Apr 19, 2018 at 17:51

brianyates

3993 silver badges17 bronze badges

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

1 Comment

Sergio santa Over a year ago

That's exactly what I needed. Thank you very much, work like a charm.

Collectives™ on Stack Overflow

Changing and loading an iframe ‘src’ attribute with jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related