change video on resize in jQuery

by Faisal Khan Janjua

HTML

<video playsinline autoplay muted id="myVideo" data-sm="https://simpl.info/video/video/chrome.mp4" data-lg="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4">

JavaScript

$(document).ready(function(){
	function mobileVid(){
		var vidlg = jQuery('#myVideo').attr('data-lg');
		var vidsm = jQuery('#myVideo').attr('data-sm');
		if(window.matchMedia("(min-width: 768px)").matches) {
			jQuery('body').removeClass("smallWidthActive");
			if(!jQuery('body').hasClass("largeWidtActive")){
				jQuery('#myVideo').attr('src', vidlg);
				jQuery('#myVideo').load();
				jQuery('#myVideo').get(0).play();
			}
			jQuery('body').addClass("largeWidtActive");
		}
		else {
			jQuery('body').removeClass("largeWidtActive");
			if(!jQuery('body').hasClass("smallWidthActive")){
				jQuery('#myVideo').attr('src', vidsm);
				jQuery('#myVideo').load();
				jQuery('#myVideo').get(0).play();
			}
			jQuery('body').addClass("smallWidthActive");
		}
  setTimeout(function(){
      document.getElementById("myVideo").play();
  },0);
	}
	mobileVid();
	jQuery(window).on('resize', function(){
		mobileVid();
	});
});