teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問ワードプレス　youtube　動画　レイアウトが崩れてしまい横幅が合わせられません。

編集履歴

質問編集履歴

6

aa

2019/07/14 06:55

投稿

jbe4w86ixd
jbe4w86ixd

スコア12

test CHANGED
File without changes
test CHANGED
@@ -3,12 +3,6 @@
3
3
 
4
4
 
5
5
  ワードプレス　youtube　動画　レイアウトが崩れてしまい横幅が合わせられず困っております。
6
-
7
-
8
-
9
- URLは以下になります。
10
-
11
- http://waww.wp.xdomain.jp/2019/07/14/%e5%8b%95%e7%94%bb/
12
6
 
13
7
 
14
8
 
@@ -18,143 +12,11 @@
18
12
 
19
13
  ワードプレスで以下のように動画を埋め込む事ができましたが
20
14
 
21
-
22
-
23
- ![イメージ説明](55b7589fb72439404acd465f499d7d41.jpeg)
24
-
25
-
26
-
27
15
  レスポンシブにした場合でもワードプレスでyoutube動画を横幅を揃えて掲載したいです。
28
16
 
29
17
  しかしレイアウトが以下写真のようにずれてしまいます。具体的には本来の横幅デザインレイアウトよりも
30
18
 
31
19
  大きく動画がはみ出してしまいます。
32
-
33
-
34
-
35
- ![イメージ説明](4f4b2ad2293e66e6767a33a87e9569de.jpeg)
36
-
37
-
38
-
39
-
40
-
41
- ### 発生している問題
42
-
43
-
44
-
45
- 画像を参照して頂くと赤線までが通常のスマホ表示となります。
46
-
47
- しかしyoutube動画を挿入するとレイアウトが崩れ動画部分がはみ出してしまいます。
48
-
49
- iphone5でもiphone6でもこのようにレイアウトが崩れてしまいます。
50
-
51
-
52
-
53
-
54
-
55
- ### 該当のソースコード
56
-
57
-
58
-
59
- iframeになります。
60
-
61
-
62
-
63
- ```ここに言語名を入力
64
-
65
- <figure><iframe src="https://www.youtube.com/embed/0r0ZaPIpd1g" allowfullscreen="" width="560" height="315"></iframe></figure>
66
-
67
- ```
68
-
69
-
70
-
71
- CSSは以下です。
72
-
73
-
74
-
75
- ```ここに言語を入力
76
-
77
- element.style {
78
-
79
- background-image: url(https://i.ytimg.com/vi/0r0ZaPIpd1g/sddefault.jpg);
80
-
81
- }
82
-
83
-
84
-
85
- .ytp-cued-thumbnail-overlay-image {
86
-
87
- background-size: cover;
88
-
89
- -moz-background-size: cover;
90
-
91
- -webkit-background-size: cover;
92
-
93
- background-position: center;
94
-
95
- background-repeat: no-repeat;
96
-
97
- width: 100%;
98
-
99
- height: 100%;
100
-
101
- position: absolute;
102
-
103
- ```
104
-
105
-
106
-
107
- ### 試したこと
108
-
109
- まずchromeの検証からコードを辿りました。iframe周辺にclassを追加すれば解決できるのかわかりませんでした。CSSには具体的に以下を追加しましたが横幅がいっぱいになるよう表示が取れませんでした。
110
-
111
-
112
-
113
- ```
114
-
115
- youtube {
116
-
117
- position: relative;
118
-
119
- padding-bottom: 56.25%;
120
-
121
- height: 0;
122
-
123
- overflow: hidden;
124
-
125
- }
126
-
127
- .youtube iframe {
128
-
129
- position: absolute;
130
-
131
- top: 0;
132
-
133
- left: 0;
134
-
135
- width: 100%;
136
-
137
- height: 100%;
138
-
139
- }
140
-
141
- ```
142
-
143
-
144
-
145
- WORDPRESS側の設定です。
146
-
147
-
148
-
149
- ```
150
-
151
- <div class=”youtube”><iframe width=”560″ height=”315″ src=”https://www.youtube.com/watch?v=0r0ZaPIpd1g” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe></div>
152
-
153
- ```
154
-
155
-
156
-
157
- さらにメディアクエリも追加し以下コードをためしました。
158
20
 
159
21
 
160
22
 
@@ -242,30 +104,4 @@
242
104
 
243
105
 
244
106
 
245
-
246
-
247
- ようにwidthやheightが指定できる事を調べてためしたのですが
248
-
249
- 本ワードプレスがスマホなどレスポンシブにした時に横幅が切れずに表示できる方法を設定する事ができませんでした。
250
-
251
- <iframe width="560" height="315" 以下省略
252
-
253
-
254
-
255
- スマホで表示したときに動画の横幅の縮尺が切れずに、横幅が画面いっぱいに表示されるよう設定をしたいです。
256
-
257
- 具体的には以下の青線の部分までといったように、レスポンシブデザインとしてスマホに合わせて横幅を
258
-
259
- 横幅が画面いっぱいに表示されるよう設定をしたいです。
260
-
261
-
262
-
263
- つまり青線まで横幅を表示させたいです。
264
-
265
-
266
-
267
- ![イメージ説明](3f0648bd886db44ea187c18325746e27.jpeg)
268
-
269
-
270
-
271
107
  宜しくお願いします。

5

メディアクエリ

2019/07/14 06:55

投稿

jbe4w86ixd
jbe4w86ixd

スコア12

test CHANGED
File without changes
test CHANGED
@@ -154,7 +154,97 @@
154
154
 
155
155
 
156
156
 
157
+ さらにメディアクエリも追加し以下コードをためしました。
158
+
159
+
160
+
161
+ ```ここに言語を入力
162
+
163
+ @media screen and (max-width: 1024px) {
164
+
165
+ /* 1024pxまでの幅の場合に適応される */
166
+
167
+
168
+
169
+ .single iframe {
170
+
171
+ margin-right: 0;
172
+
173
+ margin-left: 0;
174
+
175
+ border: 0;
176
+
177
+ max-width: 100%;
178
+
179
+ }
180
+
181
+ }
182
+
183
+ @media screen and (max-width: 768px) {
184
+
185
+ /* 768pxまでの幅の場合に適応される */
186
+
187
+
188
+
189
+ .single iframe {
190
+
191
+ margin-right: 0;
192
+
193
+ margin-left: 0;
194
+
195
+ border: 0;
196
+
197
+ max-width: 100%;
198
+
199
+ }
200
+
201
+ }
202
+
203
+ @media screen and (max-width: 480px) {
204
+
205
+ /* 480pxまでの幅の場合に適応される */
206
+
207
+
208
+
209
+ .single iframe {
210
+
211
+ margin-right: 0;
212
+
213
+ margin-left: 0;
214
+
215
+ border: 0;
216
+
217
+ max-width: 100%;
218
+
219
+ }
220
+
221
+
222
+
223
+ @media screen and (max-width: 320px) {
224
+
225
+ /* 320pxまでの幅の場合に適応される */
226
+
227
+
228
+
229
+ .single iframe {
230
+
231
+ margin-right: 0;
232
+
233
+ margin-left: 0;
234
+
235
+ border: 0;
236
+
237
+ max-width: 100%;
238
+
239
+ }
240
+
241
+ ```
242
+
243
+
244
+
245
+
246
+
157
- さらに以下コードのようにwidthやheightが指定できる事を調べてためしたのですが
247
+ ようにwidthやheightが指定できる事を調べてためしたのですが
158
248
 
159
249
  本ワードプレスがスマホなどレスポンシブにした時に横幅が切れずに表示できる方法を設定する事ができませんでした。
160
250
 

4

あああ

2019/07/14 06:35

投稿

jbe4w86ixd
jbe4w86ixd

スコア12

test CHANGED
@@ -1 +1 @@
1
- あああワードプレス　youtube　動画　レイアウトが崩れてしまい横幅が合わせられません。
1
+ ワードプレス　youtube　動画　レイアウトが崩れてしまい横幅が合わせられません。
test CHANGED
@@ -1,4 +1,8 @@
1
1
  お世話になります。宜しくお願い致します。
2
+
3
+
4
+
5
+ ワードプレス　youtube　動画　レイアウトが崩れてしまい横幅が合わせられず困っております。
2
6
 
3
7
 
4
8
 
@@ -12,7 +16,7 @@
12
16
 
13
17
 
14
18
 
15
- ワードプレスで動画を埋め込む事ができましたが
19
+ ワードプレスで以下のように動画を埋め込む事ができましたが
16
20
 
17
21
 
18
22
 
@@ -20,9 +24,11 @@
20
24
 
21
25
 
22
26
 
23
- レスポンシブでもワードプレスでyoutube動画を掲載したいです。
27
+ レスポンシブにした場合でもワードプレスでyoutube動画を横幅を揃えて掲載したいです。
24
28
 
25
- しかしレイアウトが以下写真のようにずれてしまいます。
29
+ しかしレイアウトが以下写真のようにずれてしまいます。具体的には本来の横幅デザインレイアウトよりも
30
+
31
+ 大きく動画がはみ出してしまいます。
26
32
 
27
33
 
28
34
 
@@ -50,11 +56,19 @@
50
56
 
51
57
 
52
58
 
59
+ iframeになります。
60
+
61
+
62
+
53
63
  ```ここに言語名を入力
54
64
 
55
65
  <figure><iframe src="https://www.youtube.com/embed/0r0ZaPIpd1g" allowfullscreen="" width="560" height="315"></iframe></figure>
56
66
 
57
67
  ```
68
+
69
+
70
+
71
+ CSSは以下です。
58
72
 
59
73
 
60
74
 
@@ -86,23 +100,17 @@
86
100
 
87
101
  position: absolute;
88
102
 
89
- ``````ここに言語を入力
90
-
91
- コード
92
-
93
103
  ```
94
104
 
95
105
 
96
106
 
97
107
  ### 試したこと
98
108
 
99
- chromeの検証からコードを辿りました。iframe周辺にclassを追加すれば解決できるのかわかりませんでした。
109
+ まずchromeの検証からコードを辿りました。iframe周辺にclassを追加すれば解決できるのかわかりませんでした。CSSには具体的に以下を追加しましたが横幅がいっぱいになるよう表示が取れませんでした。
100
110
 
101
111
 
102
112
 
103
- CSSに以下を追加コードを追加しましたが挙動が取れませんでした。
104
-
105
- ```ここに言語を入力
113
+ ```
106
114
 
107
115
  youtube {
108
116
 
@@ -136,9 +144,11 @@
136
144
 
137
145
  WORDPRESS側の設定です。
138
146
 
147
+
148
+
139
149
  ```
140
150
 
141
- <div class=”youtube”><iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/RwNuCxyWnPY” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe></div>
151
+ <div class=”youtube”><iframe width=”560″ height=”315″ src=”https://www.youtube.com/watch?v=0r0ZaPIpd1g” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe></div>
142
152
 
143
153
  ```
144
154
 

3

あ

2019/07/14 05:41

投稿

jbe4w86ixd
jbe4w86ixd

スコア12

test CHANGED
@@ -1 +1 @@
1
- ワードプレス　youtube　動画　レイアウトが崩れてしまい横幅が合わせられません。
1
+ あああワードプレス　youtube　動画　レイアウトが崩れてしまい横幅が合わせられません。
test CHANGED
@@ -86,6 +86,10 @@
86
86
 
87
87
  position: absolute;
88
88
 
89
+ ``````ここに言語を入力
90
+
91
+ コード
92
+
89
93
  ```
90
94
 
91
95
 
@@ -94,7 +98,53 @@
94
98
 
95
99
  chromeの検証からコードを辿りました。iframe周辺にclassを追加すれば解決できるのかわかりませんでした。
96
100
 
97
- 以下コードのようにwidthやheightが指定できる事を調べてためしたのですが
101
+
102
+
103
+ CSSに以下を追加コードを追加しましたが挙動が取れませんでした。
104
+
105
+ ```ここに言語を入力
106
+
107
+ youtube {
108
+
109
+ position: relative;
110
+
111
+ padding-bottom: 56.25%;
112
+
113
+ height: 0;
114
+
115
+ overflow: hidden;
116
+
117
+ }
118
+
119
+ .youtube iframe {
120
+
121
+ position: absolute;
122
+
123
+ top: 0;
124
+
125
+ left: 0;
126
+
127
+ width: 100%;
128
+
129
+ height: 100%;
130
+
131
+ }
132
+
133
+ ```
134
+
135
+
136
+
137
+ WORDPRESS側の設定です。
138
+
139
+ ```
140
+
141
+ <div class=”youtube”><iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/RwNuCxyWnPY” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe></div>
142
+
143
+ ```
144
+
145
+
146
+
147
+ さらに以下コードのようにwidthやheightが指定できる事を調べてためしたのですが
98
148
 
99
149
  本ワードプレスがスマホなどレスポンシブにした時に横幅が切れずに表示できる方法を設定する事ができませんでした。
100
150
 

2

ああ

2019/07/14 05:30

投稿

jbe4w86ixd
jbe4w86ixd

スコア12

test CHANGED
File without changes
test CHANGED
File without changes

1

ああ

2019/07/14 05:02

投稿

jbe4w86ixd
jbe4w86ixd

スコア12

test CHANGED
File without changes
test CHANGED
@@ -104,4 +104,18 @@
104
104
 
105
105
  スマホで表示したときに動画の横幅の縮尺が切れずに、横幅が画面いっぱいに表示されるよう設定をしたいです。
106
106
 
107
+ 具体的には以下の青線の部分までといったように、レスポンシブデザインとしてスマホに合わせて横幅を
108
+
109
+ 横幅が画面いっぱいに表示されるよう設定をしたいです。
110
+
111
+
112
+
113
+ つまり青線まで横幅を表示させたいです。
114
+
115
+
116
+
117
+ ![イメージ説明](3f0648bd886db44ea187c18325746e27.jpeg)
118
+
119
+
120
+
107
121
  宜しくお願いします。