teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

インデント修正

2019/12/26 10:27

投稿

Lhankor_Mhy
Lhankor_Mhy

スコア37481

answer CHANGED
@@ -42,7 +42,7 @@
42
42
  $(e).attr('id', id);
43
43
  $(e).attr('src', $(e).attr('src') + '?enablejsapi=1');
44
44
 
45
- new YT.Player(id, {
45
+ new YT.Player(id, {
46
46
  events: {
47
47
  'onStateChange': onPlayerStateChange
48
48
  }

1

コメントを受けて追記

2019/12/26 10:27

投稿

Lhankor_Mhy
Lhankor_Mhy

スコア37481

answer CHANGED
@@ -25,4 +25,60 @@
25
25
  `data-mfp-src`属性については、公式のドキュメントを参照しました。
26
26
  [Including files | Magnific Popup Documentation](https://dimsemenov.com/plugins/magnific-popup/documentation.html#including-files)
27
27
  [Iframe Type | Magnific Popup Documentation](https://dimsemenov.com/plugins/magnific-popup/documentation.html#iframe-type)
28
- ご不明の点がありましたら、コメントください。
28
+ ご不明の点がありましたら、コメントください。
29
+
30
+ ### コメントを受けて追記
31
+ YouTube限定になってしまいますが……
32
+ [サンプル](https://jsfiddle.net/Lhankor_Mhy/L76nxdjs/)
33
+
34
+ ```html
35
+ <iframe class="popup-iframe" width="100%" src="https://www.youtube.com/embed/M7lc1UVf-VE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
36
+ ```
37
+
38
+ ```js
39
+ function onYouTubeIframeAPIReady() {
40
+ $('.popup-iframe').each(function(i,e){
41
+ var id = "_" + i;
42
+ $(e).attr('id', id);
43
+ $(e).attr('src', $(e).attr('src') + '?enablejsapi=1');
44
+
45
+ new YT.Player(id, {
46
+ events: {
47
+ 'onStateChange': onPlayerStateChange
48
+ }
49
+ });
50
+ });
51
+ }
52
+
53
+ function onPlayerStateChange(event) {
54
+ if (event.data == YT.PlayerState.PLAYING) {
55
+
56
+ event.target.stopVideo();
57
+
58
+ $.magnificPopup.open({
59
+ items: {
60
+ src: event.target.getIframe().src,
61
+ },
62
+ type: 'iframe',
63
+ iframe: {
64
+ markup: '<div class="mfp-iframe-scaler">'+
65
+ '<div class="mfp-close"></div>'+
66
+ '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
67
+ '</div>',
68
+ patterns: {
69
+ youtube: {
70
+ index: 'youtube.com/',
71
+ id: function(url) { return url.split('?')[0].split('/embed/')[1]; },
72
+ src: '//www.youtube.com/embed/%id%?autoplay=1' // URL that will be set as a source for iframe.
73
+ },
74
+ },
75
+ },
76
+ }, 0);
77
+
78
+ }
79
+ }
80
+ ```
81
+
82
+ HTMLは質問で提示されたままです。JavaScriptは全部入れ替えました。
83
+ ただし、[YouTube の iframe Player API](https://developers.google.com/youtube/iframe_api_reference?hl=ja) を導入する必要があるので、以下のスクリプトを読み込んでください。
84
+ https://www.youtube.com/iframe_api