Change default iframe src onclick and retain src a

Question

I have the following iframe and thumbnails on a page. How can I use javascript so that whenever a thumbnail is clicked, the data-embed-src becomes the default src for the iframe?

<iframe name="starterVID" id="starterVID" width="870" height="498" src="https://www.youtube.com/embed/" frameborder="0" allowfullscreen scrolling="no"></iframe>
</li>

<li class="span9">
  <h3>Example</h3>
  <ul class="thumbnails">
    <li class="span3">
      <a class="thumbnail cboxElement" rel="colorbox" data-embed-src="http://player.vimeo.com/video/" href="http://vimeo.com/"><img src="https://i.vimeocdn.com/video/" alt="">Vid </a>
    </li>
    <li class="span3">
      <a class="thumbnail cboxElement" rel="colorbox" data-embed-src="http://player.vimeo.com/video/" href="http://vimeo.com/"><img src="https://i.vimeocdn.com/video/" alt="">Vid0 </a>
    </li>
    <!--      <li class="span3"><a class="thumbnail cboxElement" rel="colorbox" data-embed-src="http://player.vimeo.com/video/" href="https://vimeo.com/"><img src="https://i.vimeocdn.com/video/" alt="">Vid1</a></li>
    -->
    <li class="span3">
      <a class="thumbnail cboxElement" rel="colorbox" data-embed-src="http://player.vimeo.com/video/" href="https://vimeo.com/"><img src="https://i.vimeocdn.com/video/" alt="">Vid2</a>
    </li>
</li>
</ul>
<ul class="thumbnails">
  <li class="span3">
    <a class="thumbnail cboxElement" rel="colorbox" data-embed-src="https://www.youtube.com/embed/" href="http://www.youtube.com/watch"><img src="http://i4.ytimg.com/vi/" alt="">Vid3</a>
  </li>
  <li class="span3">
    <a class="thumbnail cboxElement" rel="colorbox" data-embed-src="http://player.vimeo.com/video/" href="https://vimeo.com/"><img src="https://i.vimeocdn.com/video/" alt="">Vid4</a>
  </li>
  <li class="span3">
    <a class="thumbnail cboxElement" rel="colorbox" data-embed-src="http://player.vimeo.com/video/" href="https://vimeo.com/"><img src="https://i.vimeocdn.com/video/" alt="">Vid5</a>
  </li>
  <li class="span3">
    <a class="thumbnail cboxElement" rel="colorbox" data-embed-src="https://goo.gl/"><img src="https://goo.gl/" alt="">Picture</a>
  </li>
</ul>

I had the most success using the following javascript, however since I haven't had much luck with this approach I was thinking of trying a different approach:

<script type="text/javascript">
    function setIframeSource() {
       var theSelect = document.getElementById('choice');
       var theIframe = document.getElementById('starterVID');
       var theUrl;

       theUrl = theSelect.options[theSelect.selectedIndex].value;
       theIframe.src = theUrl;
    }
</script>
<script>
    function loadFrame(val, id){
        localStorage.setItem(val, id);

        if(typeof localStorage.getItem('starterVID') != 'undefined'){
          $('select').val(localStorage.getItem('starterVID'));
        }        
    }
</script>

Answer 1

To retrieve the value of a data-attribute, i believe you should use getAttribute().

getAttribute() returns the value of a specified attribute on the element. If the given attribute does not exist, the value returned will either be null or "" (the empty string);

function setIframeSource(vid) {
  var vid = vid.getAttribute('data-source');
  var theIframe = document.getElementById('myframe');
  theIframe.src = vid;
}

body {
  display:flex;
  align-items:center;
  justify-content:space-around;
}

<p><a data-source="https://youtube.com/embed/t2ByLmLnYJ8" onclick="setIframeSource(this);return false;" href="https://youtube.com/embed/fORZASxZMEQ">Play Iframe video ?</a>
</p><iframe src="https://stackoverflow.com/questions/46289527/change-default-iframe-src-onclick" id="myframe"></iframe>
<p><a data-source="https://youtube.com/embed/fORZASxZMEQ" onclick="setIframeSource(this);return false;" href="https://youtube.com/embed/fORZASxZMEQ">Play astro video ?</a>
</p>

About local storage, you should on load, check if there is any data yet to use, else use a default url.

example

window.onload = function() {
  var loadvid = localStorage.getItem("test");
  if (loadvid) {//if anything retrieved
    setIframeSource('', loadvid);
  } else {// if empty yet
    var theIframe = document.getElementById("myframe");
    var defaultUrl = theIframe.getAttribute('data-src');
    theIframe.src = defaultUrl;
  }
};
function setIframeSource(vid, video) {
  if (!video) {// if not from onload or empty yet
    var video = vid.getAttribute("data-source");
  }
  var theIframe = document.getElementById("myframe");
  video = video.replace(/"/g, '');
  theIframe.src = video;
  if (vid) {// if from onclick , then store it
    localStorage.setItem("test", JSON.stringify(video));
  }
}

https://codepen.io/gc-nomade/pen/yzOVEL