iframeをサムネクリックで全画面かつ自動再生させたい。（IE）

前提・実現したいこと

サムネクリックで全画面再生、一時停止・再生終了時に全画面終了。

IFrame Player APIでサイト内に埋め込み、fullScreen apiで全画面にしています。

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

IE以外では動作確認できましたが、IE11でのみフルスクリーン（全画面）になりません。

IEのコンソールに表示される内容
Access is denied.

該当のソースコード

html
1<div id="video"></div>

css
1:-webkit-full-screen video {
2  width: 100%;
3}
4
5:-moz-full-screen video {
6  width: 100%;
7}
8
9:full-screen video {
10  width: 100%;
11}
12
13:fullscreen video {
14  width: 100%;
15}
16
17:-ms-fullscreen iframe{
18  width: 100% ;
19}

js
1// IFrame Player API の読み込み
2var tag = document.createElement('script');
3tag.src = "https://www.youtube.com/iframe_api";
4var firstScriptTag = document.getElementsByTagName('script')[0];
5firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
6
7var ytPlayer;
8var youtubeId = 'YouTubeのID';
9function onYouTubeIframeAPIReady() {
10 
11  // サムネイルクリック時にYouTubeを埋め込むように設定
12  document.getElementById('movie_thumb').addEventListener('click', function() {
13    $("#movie_thumb").css({ display: "none" });
14    ytPlayer = new YT.Player(
15      'video', // 埋め込む場所の指定
16      {
17        width: 1000, // プレーヤーの幅
18        height: 560, // プレーヤーの高さ
19        videoId: youtubeId,
20            playerVars: { 
21              autoplay: 1 ,
22              loop:0,
23              rel:0
24            },
25        events: {
26            'onReady': onPlayerReady,
27            'onStateChange': onPlayerStateChange 
28        }
29      }
30    );
31  });
32}
33
34// プレーヤー読み込み後の処理
35function onPlayerReady(event) {
36  event.target.playVideo();
37}
38
39function requestFullScreen() {
40  if (video.requestFullScreen) {
41    video.requestFullScreen();
42  } else if (video.webkitRequestFullScreen) {
43    video.webkitRequestFullScreen();
44  } else if (video.webkitEnterFullscreen) {
45    video.webkitEnterFullscreen();
46  } else if (video.mozRequestFullScreen) {
47    video.mozRequestFullScreen();
48  } else if (video.msRequestFullscreen) {
49    video.msRequestFullscreen();
50  }
51}
52function exitFullscreen() {
53  if (document.exitFullscreen) {
54    document.exitFullscreen();
55  } else if (document.cancelFullScreen) {
56    document.cancelFullScreen();
57  } else if (document.mozCancelFullScreen) {
58    document.mozCancelFullScreen();
59  } else if (document.webkitCancelFullScreen) {
60    document.webkitCancelFullScreen();
61  } else if (document.msExitFullscreen) {
62    document.msExitFullscreen();
63  }
64}
65
66function onPlayerStateChange(event) {
67  var ytStatus = event.data;  
68 // 再生終了したとき
69if (ytStatus == YT.PlayerState.ENDED) {
70    exitFullscreen();
71    console.log("再生終了");
72  }
73  // 再生中のとき
74  if (ytStatus == YT.PlayerState.PLAYING) {
75      requestFullScreen();
76      console.log("再生中");
77  }
78  // 停止中のとき
79  if (ytStatus == YT.PlayerState.PAUSED) {
80    exitFullscreen();
81    console.log("停止");
82  }
83}
84

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Lhankor_Mhy

2021/02/02 02:52 編集

色々試してみた結果、わかったことを書きます。・IE11では video に iframe ではなくて、iframe の Window が入っている（エラーの原因はこれ）・IE11の msRequestFullscreen() は、documentElement や video タグでは動作するが、iframeでは動作しない（と思う）。上記の前提だと、回避方法はかなり難しそうな気がします。

Lhankor_Mhy

2021/02/02 03:10

上記に加えてわかったことがありました。・ユーザーインタラクションの中（クリックイベントなど）に書かないと動作しない。

Lhankor_Mhy

2021/02/02 03:30

回避策を回答しました。

行動規範の内容に同意します

回答2件

ベストアンサー

こんにちは。

サムネイルを押したときに、ページ全体をフルスクリーンにし、

js
1if (document.documentElement.msRequestFullscreen) document.documentElement.msRequestFullscreen();

iframe をスクリーンサイズに広げ、

css
1        :-ms-fullscreen iframe {
2            display: block;
3            width: 100vw;
4            height: 100vh;
5        }

その他の要素を隠しました。

css
1        :-ms-fullscreen body * {
2            display: none;
3        }

CSSは、実際のコードに合わせて変更してください。iframeが複数あったり body 直下にない場合は、変更が必要になると思います。

全体のコード

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <script src="https://code.jquery.com/jquery-3.5.1.min.js"
9        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
10    <style>
11        :-webkit-full-screen video {
12            width: 100%;
13        }
14
15        :-moz-full-screen video {
16            width: 100%;
17        }
18
19        :full-screen video {
20            width: 100%;
21        }
22
23        :fullscreen video {
24            width: 100%;
25        }
26
27        :-ms-fullscreen body * {
28            display: none;
29        }
30
31        :-ms-fullscreen iframe {
32            display: block;
33            width: 100vw;
34            height: 100vh;
35        }
36    </style>
37</head>
38
39<body>
40    <h1>test</h1>
41    <div id="video"></div>
42    <div id="movie_thumb">
43        <img src="http://placehold.jp/24/eeeeee/cccccc/150x100.png?text=" alt="">
44    </div>
45    <script>
46        // IFrame Player API の読み込み
47        var tag = document.createElement('script');
48        tag.src = "https://www.youtube.com/iframe_api";
49        var firstScriptTag = document.getElementsByTagName('script')[0];
50        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
51
52        var ytPlayer;
53        var youtubeId = 'ScMzIvxBSi4';
54        function onYouTubeIframeAPIReady() {
55
56            // サムネイルクリック時にYouTubeを埋め込むように設定
57            document.getElementById('movie_thumb').addEventListener('click', function () {
58                if (document.documentElement.msRequestFullscreen) document.documentElement.msRequestFullscreen();
59
60                $("#movie_thumb").css({ display: "none" });
61                ytPlayer = new YT.Player(
62                    'video', // 埋め込む場所の指定
63                    {
64                        width: 1000, // プレーヤーの幅
65                        height: 560, // プレーヤーの高さ
66                        videoId: youtubeId,
67                        playerVars: {
68                            autoplay: 1,
69                            loop: 0,
70                            rel: 0
71                        },
72                        events: {
73                            'onReady': onPlayerReady,
74                            'onStateChange': onPlayerStateChange
75                        }
76                    }
77                );
78            });
79        }
80
81        // プレーヤー読み込み後の処理
82        function onPlayerReady(event) {
83            event.target.playVideo();
84        }
85
86        function requestFullScreen() {
87            if (video.requestFullScreen) {
88                video.requestFullScreen();
89            } else if (video.webkitRequestFullScreen) {
90                video.webkitRequestFullScreen();
91            } else if (video.webkitEnterFullscreen) {
92                video.webkitEnterFullscreen();
93            } else if (video.mozRequestFullScreen) {
94                video.mozRequestFullScreen();
95            } else if (video.msRequestFullscreen) {
96                video.msRequestFullscreen();
97            }
98        }
99        function exitFullscreen() {
100            if (document.exitFullscreen) {
101                document.exitFullscreen();
102            } else if (document.cancelFullScreen) {
103                document.cancelFullScreen();
104            } else if (document.mozCancelFullScreen) {
105                document.mozCancelFullScreen();
106            } else if (document.webkitCancelFullScreen) {
107                document.webkitCancelFullScreen();
108            } else if (document.msExitFullscreen) {
109                document.msExitFullscreen();
110            }
111        }
112
113        function onPlayerStateChange(event) {
114            var ytStatus = event.data;
115            // 再生終了したとき
116            if (ytStatus == YT.PlayerState.ENDED) {
117                exitFullscreen();
118                console.log("再生終了");
119            }
120            // 再生中のとき
121            if (ytStatus == YT.PlayerState.PLAYING) {
122                requestFullScreen();
123                console.log("再生中");
124            }
125            // 停止中のとき
126            if (ytStatus == YT.PlayerState.PAUSED) {
127                exitFullscreen();
128                console.log("停止");
129            }
130        }
131    </script>
132</body>
133
134</html>

投稿2021/02/02 03:30

Lhankor_Mhy

総合スコア36960

pi------

2021/02/04 01:42 編集

ありがとうございます。フルスクリーン動作確認できました。

Lhankor_Mhy

2021/02/02 09:26

フルスクリーンにしているのはこの部分です。 if (document.documentElement.msRequestFullscreen) document.documentElement.msRequestFullscreen(); ですので、この部分がイベントリスナで実行されないといけないのだと思います。

行動規範の内容に同意します