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の直下へ移動＝＝＝＝＝

Answer

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

CSSと動画

カテゴリーから探す