HTML5でVideoを画面いっぱいに表示されるページを作っています。　iphoneではクリックして再生させたい。　

JSを書いているときにエラーが発生しています。
HTML5でVideoを画面いっぱいに表示されるページを作っています。

###発生している問題・エラーメッセージ
PCでは表示ができているが、iphoneで再生ボタンが表示されません。
http://the-beige.com/index2.html

以下記述を書くとiphoneで再生出来ません。
coverVid(document.querySelector('.mastheadvideo'), 640, 360);

###該当のソースコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="http://stefanerickson.github.io/covervid/assets/styles/normalize.css" /> <link rel="stylesheet" href="http://stefanerickson.github.io/covervid/assets/styles/styles.css" /> <title>無題ドキュメント</title> </head> <body> <style> .video-btn { content: ""; position: absolute; top:0; left:0; right:0; min-height: 80%; min-height: 80vh; bottom:40px; /*コントローラー分下部に余白を*/ cursor: pointer; z-index: 2; } </style>  <section class="masthead"> <video id="mastheadvideo" class="mastheadvideo" onended="location.href='http://the-beige.com/tent/';" onclick="video_pause()" poster="movie_bg.jpg" autoplay controls> <source src="http://the-beige.com/wp-content/uploads/2017/04/THE_BEIGE_opening-1.mp4" type="video/mp4"> <source src="http://the-beige.com/wp-content/uploads/2017/04/THE_BEIGE_opening.ogg" type="video/ogg"> <source src="http://the-beige.com/wp-content/uploads/2017/04/THE_BEIGE_opening.webm" type="video/webm"> <source src="/movie.webm" type="video/webm"> <p>video要素がサポートされていないブラウザでご覧になっています。</p> </video>

<div class="video-btn" id="video-btn"></div>

</section>

<!-- Load Scripts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://stefanerickson.github.io/covervid/covervid.js"></script>
<script src="http://stefanerickson.github.io/covervid/assets/scripts/scripts.js"></script>

<!-- Call CoverVid -->
<script type="text/javascript">
	// If using jQuery
		// $('.masthead-video').coverVid(1920, 1080);
	// If not using jQuery (Native Javascript)
		coverVid(document.querySelector('.mastheadvideo'), 640, 360);
	//video要素の取得
	  var masthead = document.getElementById('mastheadvideo');
	  //videoボタンの取得
	  var video_btn = document.getElementById('video-btn');
	  //状態保存
	  var btn_status = 0;
	  //画面クリックで再生・ポーズ
	  video_btn.addEventListener('click', function () {
		if(btn_status === 0) {
		  masthead.pause();
		  btn_status = 1;
		}else {
		  masthead.play();
		  btn_status = 0;
		}
	  });
</script>

</body> </html>


###試したこと
以下記述を書くとiphoneで再生出来ません。
coverVid(document.querySelector('.mastheadvideo'), 640, 360);  


iphoneではクリックしたら通常の再生が始まれば問題ありません。
参考：
http://www.shuwasystem.co.jp/blog/html5/html5-sample1.html