CODEWITHSUNDEEP
javascriptjqueryhtml
Someone
Someone

Reputation: 117

Replace iFrame src, on click?

Currently I have the list below which needs to update the iFrame inside of an existing div.

<div class="stream">
   <iframe src="" allowfullscreen="true" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div>

The above portion is the iFrame we need to update, the below portion is the list of streams we have to choose from on click.

<ul>
    <li class="anime">
        <a class="active" data-video="https://someexamplewebsite.com" href="#" rel=
        "1">Vidstreaming<span>Choose this server</span></a>
    </li>
    <li class="vidcdn">
        <a class="" data-video="https://someexamplewebsite.com" href="#" rel="100">Vidcdn<span>Choose
        this server</span></a>
    </li>
    <li class="streamango">
        <a data-video="https://someexamplewebsite.com" href="#" rel="12">Streamango<span>Choose this server</span></a>
    </li>
    <li class="rapidvideo">
        <a data-video="https://someexamplewebsite.com" href="#" rel="21">Rapidvideo<span>Choose this server</span></a>
    </li>
    <li class="estram">
        <a data-video="https://someexamplewebsite.com" href="#" rel="7">Estream<span>Choose this server</span></a>
    </li>
    <li class="open">
        <a data-video="https://someexamplewebsite.com" href="#" rel="16">Oload<span>Choose this server</span></a>
    </li>
    <li class="open">
        <a data-video="https://someexamplewebsite.com" href="#" rel="5">OpenUpload<span>Choose this server</span></a>
    </li>
    <li class="mp4">
        <a data-video="https://someexamplewebsite.com" href="#" rel="3">Mp4Upload<span>Choose this server</span></a>
    </li>
</ul>

I am wondering how we can make this work easily, and in a way that if the a has a class of active then the iframe is updated with that portions data-video then unsetting the default active on click of another a href

Upvotes: 0

Views: 199

Answers (1)

BadPiggie
BadPiggie

Reputation: 6359

<div class="stream">
   <iframe src="" allowfullscreen="true" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" id='iFrameElement'></iframe>
</div>

<ul>
    <li class="anime">
        <a class="active" data-video="https://someexamplewebsite.com" href="#" rel=
        "1" onclick="changeSource(this)">Vidstreaming<span>Choose this server</span></a>
    </li>
    <li class="vidcdn">
        <a class="" data-video="https://someexamplewebsite.com" href="#" rel="100" onclick="changeSource(this)">Vidcdn<span>Choose
        this server</span></a>
    </li>
    <li class="streamango">
        <a data-video="https://someexamplewebsite.com" href="#" rel="12" onclick="changeSource(this)">Streamango<span>Choose this server</span></a>
    </li>
    <li class="rapidvideo">
        <a data-video="https://someexamplewebsite.com" href="#" rel="21" onclick="changeSource(this)">Rapidvideo<span>Choose this server</span></a>
    </li>
    <li class="estram">
        <a data-video="https://someexamplewebsite.com" href="#" rel="7" onclick="changeSource(this)">Estream<span>Choose this server</span></a>
    </li>
    <li class="open">
        <a data-video="https://someexamplewebsite.com" href="#" rel="16" onclick="changeSource(this)">Oload<span>Choose this server</span></a>
    </li>
    <li class="open">
        <a data-video="https://someexamplewebsite.com" href="#" rel="5" onclick="changeSource(this)">OpenUpload<span>Choose this server</span></a>
    </li>
    <li class="mp4">
        <a data-video="https://someexamplewebsite.com" href="#" rel="3" onclick="changeSource(this)">Mp4Upload<span>Choose this server</span></a>
    </li>
</ul>


<script>

  function changeSource(e){
  
  var t = e.getAttribute("data-video");
  document.getElementById("iFrameElement").src=t;
  
  }

</script>

<div class="stream">
   <iframe src="" allowfullscreen="true" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" id='iFrameElement'></iframe>
</div>

<ul>
    <li class="anime">
        <a class="active" data-video="https://someexamplewebsite.com" href="#" rel=
        "1" onclick="changeSource(this)">Vidstreaming<span>Choose this server</span></a>
    </li>
    <li class="vidcdn">
        <a class="" data-video="https://someexamplewebsite.com" href="#" rel="100" onclick="changeSource(this)">Vidcdn<span>Choose
        this server</span></a>
    </li>
    <li class="streamango">
        <a data-video="https://someexamplewebsite.com" href="#" rel="12" onclick="changeSource(this)">Streamango<span>Choose this server</span></a>
    </li>
    <li class="rapidvideo">
        <a data-video="https://someexamplewebsite.com" href="#" rel="21" onclick="changeSource(this)">Rapidvideo<span>Choose this server</span></a>
    </li>
    <li class="estram">
        <a data-video="https://someexamplewebsite.com" href="#" rel="7" onclick="changeSource(this)">Estream<span>Choose this server</span></a>
    </li>
    <li class="open">
        <a data-video="https://someexamplewebsite.com" href="#" rel="16" onclick="changeSource(this)">Oload<span>Choose this server</span></a>
    </li>
    <li class="open">
        <a data-video="https://someexamplewebsite.com" href="#" rel="5" onclick="changeSource(this)">OpenUpload<span>Choose this server</span></a>
    </li>
    <li class="mp4">
        <a data-video="https://someexamplewebsite.com" href="#" rel="3" onclick="changeSource(this)">Mp4Upload<span>Choose this server</span></a>
    </li>
</ul>


<script>

  function changeSource(e){
  
  var t = e.getAttribute("data-video");
  document.getElementById("iFrameElement").src=t;
  
  var eSet = document.getElementsByTagName("a");
  var i = 0;
  
  while(i < eSet.length){
  
    eSet[i].className = "";
  
    i++;
  }
  
  e.className = "active";
  
  }

</script>

Upvotes: 1

Related Questions