Search code examples
jqueryhtmlvideoiframesrc

Changing and loading an iframe ‘src’ attribute with jQuery

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.

Solution

  • 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 :)