CSSと動画

Question

いつもお世話になっております。

楽天・ヤフーの特集ページに動画を入れた
レイアウトを作成しているのですが、
動画がうまく要素の中に収まりません。
videoタグやCSSの方でサイズや中央寄せを調整しても
綺麗に反映されませんでした…。

もともとの組み方がよくないのか、CSSの指定の仕方が
間違っているのか、ご教示していただけたら幸いです。

特集URL↓
https://www.rakuten.ne.jp/gold/tokeiten/feature/promaster/index.html

Accepted Answer

ECマスターズの伊藤です。

> .c-movie-modal-btnも変更したので、@mediaにある.c-movie-modal-btnを調整すれば
> 反映されるのでしょうか？

PC版を修正時に、構造を変更しましたので
767px以下（@media (max-width: 767px)）の設定も
修正していただく必要がございます。


767px以下で設定している.c-movie-modal-btnを
全て削除していただけますでしょうか。
＝＝＝削除＝＝＝
.c-movie-modal-btn{
height:0;
padding-top:55%;
margin-bottom:-36px;
}
＝＝＝＝＝

必要に応じて、767px以下に
videoの位置を調整する下記追加して、200の数字を変更してください。
＝＝＝＝＝
.c-movie-modal-btn video{
    left:200px;
}
＝＝＝＝＝

Answer

ECマスターズの伊藤です。

> 楽天・ヤフーの特集ページに動画を入れた
> レイアウトを作成しているのですが、
> 動画がうまく要素の中に収まりません。

少々HTML構造を変更しましたが、問題ございませんでしょうか。
下記の通り修正していただきますと、
動画が表示されるようになりますので
ご確認くださいませ。


videoタグをc-movie-modal-btnの直下へ移動
＝＝＝＝＝


＝＝＝＝＝

videoタグにCSSを適用
＝＝＝＝＝
.c-movie-modal-btn video{
    position: absolute;
    left: -200px;
}
＝＝＝＝＝
※leftの数字は、ご希望の位置に合わせて修正してください。

タグに
適用しているCSSのから
paddingを削除し、heightを400pxに変更
＝＝＝＝＝
.c-movie-modal-btn{
    display:block;
    width:100%;
    height: 400px;
    /* padding-top:400px; */
    background-position:center;
    background-color:#AAA;
    background-size:cover;
    position:relative;
    overflow:hidden;
}
＝＝＝＝＝

Answer

ご教示の方ありがとうございます。
教えていただいたコードを反映しましたら無事に動画が表示されました！

ただ、iPhone・androidに切り替えたとき動画が消えてしまって…。
最初の方@mediaで動画は指定していなかったので、.c-movie-modal-btn videoを
@mediaにも追加したのですがなにも変わらず……。
.c-movie-modal-btnも変更したので、@mediaにある.c-movie-modal-btnを調整すれば
反映されるのでしょうか？