Change default iframe src onclick?

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="http://ift.tt/2fgVxL0" 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="http://ift.tt/2fgVxL0" 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="http://ift.tt/2fgVxL0" 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="http://ift.tt/2fgVxL0" 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="http://ift.tt/2fgVxL0" 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="http://ift.tt/2fgVxL0" 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>