Colorboxを設置し動画ポップアップができるようにたら、スマホサイトのメニューボタンがクリックできなくなったので改善したい。

#困りごと①
サイト訪問時にYouTubeをポップアップさせる（自動再生ではない）ために、Colorboxを設置
↓
動画を閉じたあと、メニューボタンを押し、メニューバーから別ページに飛ぶ
↓
再度メニューボタンを押したら反応しなくなってしまった。
（再読み込みやcookieを削除しても直りませんでした）

ツイッターなど外部サイトに飛んだ後に戻ってきても同じ現象が起こりました。

#困りごと②
ポップアップの動画サイズを、スマホで見たときにもちょうどいいサイズにしたいですが、
$(function(){
jQuery('.colorbox').colorbox({
open:true,
iframe: true,
innerWidth: 650, /* 任意の数字 /
innerHeight: 350 / 任意の数字 */
});
部分のinnerWidth,innerHeightを90％などに変えても反映されません。

###困りごと①について補足
設置してくれた友人も、原因がわからないようでした。
当初友人はiPhone7だとその現象は起こらないと言っていまして、
私のiPhineXsだけかとおもっていたのですが、
PCサイトの画面幅を小さくして確認しても、やはりメニューボタンが押せなくなっていました。

###困りごと②について補足
これは友人から、意外と難しいと言われておりました(iframeの挙動が〜と言ってました)。
もしかしたらCSSの方で問題があるかもしれませんが、とりいそぎhtmlだけ載せます。

#コード
head部分にこちらを入れており、

html
1<link rel="stylesheet" type="text/css" href="css/style.css">
2<link rel="stylesheet" href="css/colorbox.css">
3<!-- jQuery Version 3.1.0 -->
4<script src="js/jquery-3.4.1.min.js"></script>
5<script src="js/jquery.colorbox.js"></script>
6<script src="js/script.js"></script>

</head>と<header>の間にこちらを入れました。リンクはフェイクです。 ```html <div id="wrapper"> <main> <a href="https://www.youtube.com/embed/#######?rel=0&autoplay=1;" target="_blank" class="colorbox"></a> ```

そして</footer>から下がこうなっております。

html
1</footer>
2<div class="totop"><a href="#"><img src="images/totop.png" alt="ページのトップへ戻る"></a></div><!-- /.totop -->
3  </div>
4<script>
5$(function(){
6$('a[href^="#"]').click(function(){
7var speed = 500;
8var href= $(this).attr("href");
9var target = $(href == "#" || href == "" ? 'html' : href);
10var position = target.offset().top;
11$("html, body").animate({scrollTop:position}, speed, "swing");
12return false;
13});
14});
15    
16			$(function(){
17				//Examples of how to assign the Colorbox event to elements
18				$(".youtube").colorbox({iframe:true, innerWidth:"70%", innerHeight:"70%"});				
19				$("#click").click(function(){ 
20					$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
21					return false;
22				});
23			});
24
25
26$(function(){
27  jQuery('.colorbox').colorbox({
28    open:true,
29    iframe: true,
30    innerWidth: 650, /* 任意の数字 */
31    innerHeight: 350 /* 任意の数字 */
32  });
33});
34</script>
35</html>

###今回関係ないが追加で聞きたい事
そもそも、今作っているサイトはなぜかiPhoneXsのSafariだけヘッダーにあるツイッターボタンなどが消えてしまう（Chromeだと表示される）といった現象が起こるのですが、特定の機種で表示や挙動がおかしい場合、皆様どう対処していらっしゃるのでしょうか、、？

情報が不足している場合、ご連絡お願い致します。
本当に初心者で、調べながら作っておりますが限界です。。

どなたかお優しい方、お知恵を貸してください。。
よろしくお願いいたします。