横幅が小さい埋め込みyoutubeのステータスバーの全画面表示を表示させる

いつもお世話になっております。

サイト内にyoutubeの埋め込みを行っているのですが、都合どうしても横幅を250px以下にする必要がある状況です。
その場合に下記画像のように、iphoneのsafariブラウザにおいて再生ボタンとシークバーは表示される状況なのですが、全画面や音量ボタンは表示されません。

PCのChromeやsafariブラウザ、スマートフォンのchromeなどは再生ボタンとシークバーは表示されるのですが、iphoneのsafariブラウザのみ表示されません。

横幅はこれ以上大きくできない状況で全画面や音量ボタンを表示する方法はあるのでしょうか。
埋め込み自体は、最初はyoutubeのサムネイル画像を用意しておき、その画像がクリックされたらyoutubeの埋め込みに変更するような流れです（下記コード）。

javascript
1
2$(document).on('click',".play_img", function() {
3    //Youtube埋め込み
4    let data = this.id;
5    let data_id = data.replace(/[^0-9]/g, '');
6    let plaer_name = "player_" + data_id
7    let src_arry = $(this).prev('img')[0].src.split('/')
8    let youtube_id = src_arry[src_arry.length -2]
9
10    //サムネイル非表示
11    let hide_thum_id = "#thumb_" + data_id
12    $(hide_thum_id).hide();
13    let hide_ytimg_id = "#thumb_ytimg_" + data_id
14    $(hide_ytimg_id).hide();
15
16    player = new YT.Player(plaer_name, {
17      height: '100%',
18      width: '100%',
19      playerVars: {
20        autoplay: 0,//オートプレイ
21        rel: 0,//関連動画表示オフ
22        playsinline: 1
23      },
24      videoId: youtube_id,
25      events: {
26        'onReady': onPlayerReady,
27      }
28    });
29  });
30
31function onPlayerReady(event) {
32    //スマホの場合はmuteを追加
33    if (mobile) {
34      event.target.mute();
35    }
36    event.target.playVideo();
37  }
38
39

調べ方が悪いとは思うのですが、ググっても分からずこちらに質問させていただきました。
参考になるサイトでも構いませんので、適切な方法をご教示いただけますと幸いです。
よろしくお願いいたします。

Lhankor_Mhy

2020/07/29 01:53

> プレーヤーにコントロールバーを表示させる場合は、ビューポートの最小サイズを下回らずにコントロールバーを表示できるよう、十分な大きさを確保する必要があります。少なくとも幅 480 ピクセル、高さ 270 ピクセルの、アスペクト比 16:9 のプレーヤーをおすすめします。 https://developers.google.com/youtube/player_parameters?hl=ja とのことですが、既読でしょうか。