Change Iframe Src Without Page Update

Check out my HTML code: Copy

Step 2: Update your buttons...

<button type="button" onclick="ChangeSource(1);">Change to video 1</button>

Step 3: Include this function...

functionChangeSource(Button){
if(Button==1){FrameId.src='URL 1';} elseif(Button==2){FrameId.src='URL 2';} elseif(Button==3){FrameId.src='URL 3';} elseif(Button==4){FrameId.src='URL 4';}
}

Solution 2:

I would suggest using 1 function instead of 4, and add your links as data inside of each button. You could also add those links dynamically at runtime. I used a placeholder video from youtube on a demo for button 1, and as you see you can switch out your iframe src using the following jQuery function.

$( document ).ready(function() {
  $('.changer').click(function(e){
    changeIframe(e);
  })
})

functionchangeIframe(e) {
  var link = $(e.currentTarget).data('link');
  $('.embed-responsive-item').attr('src',link);
  alert('link is now '+link);
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script><!-- Button trigger modal --><buttontype="button"class="btn btn-primary btn-lg"data-toggle="modal"data-target="#myModal">Launch demo modal</button><div><buttonclass="changer"type="button"data-link="https://www.youtube.com/watch?v=ScMzIvxBSi4">Change to video 1</button><buttonclass="changer"type="button"data-link="">Change to video 2</button><buttonclass="changer"type="button"data-link="">Change to video 3</button><buttonclass="changer"type="button"data-link="">Change to video 4</button></div><divid="myModal"class="modal fade"role="dialog"tabindex='-1'><divclass="modal-dialog"><divclass="modal-content"><divclass="modal-header"><pclass="modal-title">SECRETS OF SUPERIOR CUSTOMER SERVICE (July 22, 2016)</p></div><divclass="modal-body"><divclass="embed-responsive embed-responsive-16by9"><iframeclass="embed-responsive-item"src="http://chishare.cc/embed/2107778410/"allowfullscreen=""width="640"height="360"frameborder="0"></iframe></div></div><divclass="modal-footer"><buttontype="button"class="btn btn-default"data-dismiss="modal">Fechar</button></div></div></div>