switch video dynamically

replacing the whole video-element with a new one Doesn't work in Chrome and Safari (but different)

HTML

<div id="main">
    <video id="video" autobuffer controls>
        <source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
    </video>
</div>
<div id="footer">
     <ul class="noList control">
         <li><button data-movie="sintel_trailer">Sintel Trailer</button></li>
         <li><button data-movie="big-buck-bunny">Big Buck Bunny</button></li>
     </ul>
 </div>

CSS

#main, #footer {width: 600px;margin: 20px auto 0 auto;}
#video {width: 480px;}
.noList { list-style-type: none; padding: 0; margin: 0;}
.control { float: left;}
.control li { float: left;}
.control button {
  background-color: #a20000;
  color: #fff;
  border: none;
  font-size: 14px;
  padding: 5px 10px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) 0 0 transparent;
  -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) 0 0 transparent;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) 0 0 transparent;
  cursor: pointer;
}

JavaScript

//replacing the whole video-element with a new one

// Doesn't work in Chrome and Safari (but different)

// switch videos 
$(".control button").on("click", function(e) {
  var videoname = $(this).attr("data-movie");
  var newvideo =  "<video id'video' controls><source id='mp4' src='http://grochtdreis.de/fuer-jsfiddle/video/"+videoname+"-480.mp4' type='video/mp4'></video>";
  $("#video").replaceWith(newvideo);
  $("#video").load();

});