キャビネット登録動画のレスポンシブ対応に関しまして

Question

楽天キャビネットへ登録した動画を特集ページで使用したいのですがサードパーティ製のシステムを使用しての特集ページ作成につき下記で手が止まっており、皆様の教えを乞いたく質問させて頂きます。

通常は画像やリンク先を選択して構築する簡単な作業工程で特集ページ等が作れるというものですが、そこへキャビネットにアップしている動画を掲載する際はフリースペースへのHTMLタグの直接記述が必要になります。

キャビネットの動画貼り付け用HTMLソースだけでは当たり前ですがスマホでは動画は元の横幅、縦の大きさで表示されてしまいます。

フリースペースへはHTML,CSS,JS等、モール側で禁止されていない記述は全て可能です。

そこで下記動画のHTMLソースをフリースペースへ記載する際にスマホ対応するべくHTML,CSS,JS等を教えて頂けますと助かります（なるべくシンプルな方法だと有難いです）。




宜しくお願い致します。

Accepted Answer

ECマスターズの土屋です。

>そこで下記動画のHTMLソースをフリースペースへ記載する際にスマホ対応するべくHTML,CSS,JS等を教えて頂けますと助かります（なるべくシンプルな方法だと有難いです）。

タグでR-Cabinetの動画を参照しますと
下記のキャプチャの様にvideoタグなどが生成されます。

https://ec-masters.gyazo.com/762a9928872d7d00a8f267480716f37d

生成されたタグをで囲み
その子要素にCSSを当てる事で
スマホに対応することができます。

具体的にはHTMLでは

    

と記述して頂き
CSSでは
.video-container :nth-child(2) {
    width: 〇〇% !important;
}
と記述して頂きますと
横幅を指定することができます。

一度、上記の方法で
動作の確認をして頂けますと幸いです。

どうぞよろしくお願いします。