【JS】ウィンドウリサイズ時に動画が全画面で表示されない件について

前提・実現したいこと

レスポンシブサイトでウィンドウリサイズを使用しPC / スマホと別のレイアウトを表示させています。
bxsliderを使用し、PCで横に3つのコンテンツが並び、スマホでは1つのコンテンツがスライドで移動する体裁になります。

PC閲覧時に動画の全画面ボタンを押したところ一瞬全画面になりますが、すぐに元の表示に戻ってしまい動画も再生されません。
スマホ時は問題ありませんがPC閲覧時に全画面表示にするにはどうすれば宜しいでしょうか？

発生している問題・エラーメッセージ

PC閲覧時に動画の全画面ボタンを押したところ一瞬全画面になりますが、すぐに元の表示に戻ってしまい動画も再生されません。

該当のソースコード

<script type='text/javascript'>//<![CDATA[
  
  
	$(document).ready(function(){
	if(($(window).width()) < 750)
	{
		 $('.bxslider').bxSlider();
	}
	});
	
	$(window).resize(function(){
	if(($(window).width()) < 750)
	{
		 $('.bxslider').bxSlider();
	} 
	if(($(window).width()) > 750)
	{
		
	$(window).bind('resize', function(e)
		{
		  if (window.RT) clearTimeout(window.RT);
		  window.RT = setTimeout(function()
		  {
			this.location.reload(true); 
		  }, 200);
		});
	}
	});
	

</script>

<ul class="bxslider">
  <li>
    <div class="m_s">
      <h3>コンテンツ1</h3>
      <div class="video-container">
        <iframe width="282" height="190" src="https://www.youtube.com/xxxxx" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
      </div>
      <p>テキストテキストテキスト</p>
    </div>
  </li>
  <li>
    <div class="m_s">
      <h3>コンテンツ2</h3>
      <div class="coming-soon"> <span>テキストテキストテキスト</span> </div>
    </div>
  </li>
  <li>
    <div class="m_s">
      <h3>コンテンツ3</h3>
      <div class="coming-soon"> <span>テキストテキストテキスト</span> </div>
    </div>
  </li>
</ul>

試したこと

下記の処理でブラウザの横幅750px以下では全画面ボタンを押した際に問題なく全画面表示される事を確認しておりますが、750px以上の場合は全画面ボタンを押した際にすぐに元の表示に戻ってしまい動画も再生されません。

if(($(window).width()) > 750)
	{
		
	$(window).bind('resize', function(e)
		{
		  if (window.RT) clearTimeout(window.RT);
		  window.RT = setTimeout(function()
		  {
			this.location.reload(true); 
		  }, 200);
		});
	}