質問編集履歴

1

コードを追記しました

2020/07/29 01:32

投稿

lyzmfeqpxs54
lyzmfeqpxs54

スコア237

test CHANGED
File without changes
test CHANGED
@@ -18,6 +18,92 @@
18
18
 
19
19
  横幅はこれ以上大きくできない状況で全画面や音量ボタンを表示する方法はあるのでしょうか。
20
20
 
21
+ 埋め込み自体は、最初はyoutubeのサムネイル画像を用意しておき、その画像がクリックされたらyoutubeの埋め込みに変更するような流れです(下記コード)。
22
+
23
+
24
+
25
+ ```javascript
26
+
27
+
28
+
29
+ $(document).on('click',".play_img", function() {
30
+
31
+ //Youtube埋め込み
32
+
33
+ let data = this.id;
34
+
35
+ let data_id = data.replace(/[^0-9]/g, '');
36
+
37
+ let plaer_name = "player_" + data_id
38
+
39
+ let src_arry = $(this).prev('img')[0].src.split('/')
40
+
41
+ let youtube_id = src_arry[src_arry.length -2]
42
+
43
+
44
+
45
+ //サムネイル非表示
46
+
47
+ let hide_thum_id = "#thumb_" + data_id
48
+
49
+ $(hide_thum_id).hide();
50
+
51
+ let hide_ytimg_id = "#thumb_ytimg_" + data_id
52
+
53
+ $(hide_ytimg_id).hide();
54
+
55
+
56
+
57
+ player = new YT.Player(plaer_name, {
58
+
59
+ height: '100%',
60
+
61
+ width: '100%',
62
+
63
+ playerVars: {
64
+
65
+ autoplay: 0,//オートプレイ
66
+
67
+ rel: 0,//関連動画表示オフ
68
+
69
+ playsinline: 1
70
+
71
+ },
72
+
73
+ videoId: youtube_id,
74
+
75
+ events: {
76
+
77
+ 'onReady': onPlayerReady,
78
+
79
+ }
80
+
81
+ });
82
+
83
+ });
84
+
85
+
86
+
87
+ function onPlayerReady(event) {
88
+
89
+ //スマホの場合はmuteを追加
90
+
91
+ if (mobile) {
92
+
93
+ event.target.mute();
94
+
95
+ }
96
+
97
+ event.target.playVideo();
98
+
99
+ }
100
+
101
+
102
+
103
+
104
+
105
+ ```
106
+
21
107
 
22
108
 
23
109
  調べ方が悪いとは思うのですが、ググっても分からずこちらに質問させていただきました。