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

質問編集履歴

4

質問、画像の修正

2018/01/19 01:54

投稿

rrr6
rrr6

スコア8

title CHANGED
File without changes
body CHANGED
@@ -1,6 +1,7 @@
1
- <video>タグにてphotoshopで作成したmp4動画をアップしたいのですが、サイズが合わず、左右に黒帯が出てしまいます。960×550で実際のサイトにはアップしたいのですが。。。
1
+ <video>タグにてphotoshopで作成したmp4動画をアップしたいのですが、サイズが合わず、左右に黒帯が出てしまいます。
2
+ **★960×550のサイズで実際のサイトにはアップしたいのですが、制作する動画サイズはいくつが望ましいでしょうか。また、<video>タグやCSS等で統制する方法はありますでしょうか**
2
3
 
3
- 960×720(3:4)で作成した動画をHTML上に入力し、
4
+ ① **960×720(3:4の比率**で作成した動画をHTML上に入力し、
4
5
  ```HTML5
5
6
  <!--videoタグ-->
6
7
  <div id="samv">
@@ -11,7 +12,7 @@
11
12
  ```
12
13
 
13
14
 
14
- CSSで、高さを550px
15
+ CSSで、高さを550pxに制御すると、動画の下の部分(170px分)は切れてしまいますが、**黒帯は無く表示されます**
15
16
 
16
17
  ```CSS3
17
18
  #samv {
@@ -22,14 +23,15 @@
22
23
  }
23
24
  ```
24
25
 
25
- にすると、動画の下の部分は切れてしまいますが、黒帯無く表示されます。
26
26
 
27
- ですが、元の動画を960×550で制作し、
28
- <video id="video" autoplay loop width="960" height="550" >
29
- として入力すると画像は全て出るのですが、左右に黒帯が出てしまいます。
30
27
 
28
+ ② しかし、元の動画を**960×550で制作**し、
29
+ <video id="video" autoplay loop width="960" height="550" >と入力し、
31
- ![こような感じです](c06623943be1eb4759965b9f0e512ecb.jpeg)
30
+ 先程CSSと組み合わせると、画像は全て出るのですが、元のサイズではなく、左右に黒帯が出てしまいます。
31
+ この時、動画のサイズは変更され、黒帯含めて、960×550となってしまいます。
32
32
 
33
+ ![Chromeでの表示](b233e41504615e383ff3f7d54ac15099.jpeg)
33
34
 
34
- 下が切れても、34の比率で動画を作成しないないのでしょうか
35
+ 3:4の比率で作成した動画では黒帯が出ないので望ましと思ったのですが、画像を切ることく、黒帯を出すことも無く、960×550のサイズで表示させることは難しいのでしょうか
36
+ ①の例の場合、CSSで統制できたのですが、②の場合は<video>タグやcssでサイズを変更しても、黒帯は消えません。
35
37
  解決法ございましたら教えてください。。。

3

画像追加

2018/01/19 01:54

投稿

rrr6
rrr6

スコア8

title CHANGED
File without changes
body CHANGED
@@ -26,7 +26,10 @@
26
26
 
27
27
  ですが、元の動画を960×550で制作し、
28
28
  <video id="video" autoplay loop width="960" height="550" >
29
- として入力すると左右に黒帯が出てしまいます。
29
+ として入力すると画像は全て出るのですが、左右に黒帯が出てしまいます。
30
30
 
31
+ ![このような感じです](c06623943be1eb4759965b9f0e512ecb.jpeg)
32
+
33
+
31
34
  下が切れても、3:4の比率で動画を作成しないといけないのでしょうか?
32
35
  解決法ございましたら教えてください。。。

2

>入力忘れ

2018/01/19 00:37

投稿

rrr6
rrr6

スコア8

title CHANGED
File without changes
body CHANGED
@@ -4,7 +4,7 @@
4
4
  ```HTML5
5
5
  <!--videoタグ-->
6
6
  <div id="samv">
7
- <video id="video" autoplay loop width="960" height="720" ><source src="sample.mp4"
7
+ <video id="video" autoplay loop width="960" height="720" ><source src="sample.mp4">
8
8
  </video>
9
9
  </div>
10
10
  <!--videoタグ-->

1

入力修正

2018/01/18 08:57

投稿

rrr6
rrr6

スコア8

title CHANGED
File without changes
body CHANGED
@@ -1,21 +1,26 @@
1
1
  <video>タグにてphotoshopで作成したmp4動画をアップしたいのですが、サイズが合わず、左右に黒帯が出てしまいます。960×550で実際のサイトにはアップしたいのですが。。。
2
2
 
3
3
  960×720(3:4)で作成した動画をHTML上に入力し、
4
-
4
+ ```HTML5
5
5
  <!--videoタグ-->
6
6
  <div id="samv">
7
7
  <video id="video" autoplay loop width="960" height="720" ><source src="sample.mp4"
8
8
  </video>
9
9
  </div>
10
10
  <!--videoタグ-->
11
+ ```
11
12
 
13
+
12
14
  CSSで、高さを550px
15
+
16
+ ```CSS3
13
17
  #samv {
14
18
  width: 960px;
15
19
  height: 550px;
16
20
  margin: auto;
17
21
  overflow: hidden;
18
22
  }
23
+ ```
19
24
 
20
25
  にすると、動画の下の部分は切れてしまいますが、黒帯無く表示されます。
21
26