楽天RMSにおける動画アップロードの生成コードscript要素について

Question

いつも大変お世話になっております。

現在、楽天RMS商品ページのスマホページに動画（mp4）を埋め込んでおります。

スマホページの場合、たしかiframeが使えないため下記のようなscript要素コードをRMSの動画アップロード機能の貼り付け用HTMLソースによって生成して利用しておりますが、生成されるwidthとheightについては固定値しかありません。



その為、スマホを縦表示した際はどうにか調整は聞くのですが、そのまま横表示した際は、可変しないため余白が出て見た目が悪い状態になってしまいます。

スマホの画面サイズに応じて可変させたいのですが可能でしょうか。
出来る場合いコードをどのように書き換えればよろしいでしょうか。
どうぞ宜しくお願い致します。

Answer

ECマスターズの伊藤です。

> スマホの画面サイズに応じて可変させたいのですが可能でしょうか。

動画(HTMLソース）に貼り付けた動画の再生は、
自動的に全画面になるようでしたので
再生前に表示される静止画でよろしかったでしょうか。

静止画を可変とするには、下記のコードを、
スマートフォン用商品説明文などに入れてください。

なお、楽天RSMのバグを利用した方法となっております。
仕様変更となった際に、ご利用いただけなくなる可能性がございますので
ご了承の上、ご利用くださいますよう、お願いいたします。

＝＝＝以下を貼り付け＝＝＝＝

.RVideoPF-Player-TitleImagePlugin-Image{
width:100%!important;
height:auto!important;
}

Answer

お世話になっております。
上記のコードでは、だめでした。
デベロッパーツールによる調査とiPhone6による表示結果で調査を進めておりますが、楽天側のPhone用のCSSに記載されている!importantによって、阻止されてしまうようです。

そのCSSを一時的に無効化し教えていただいたCSSが有効にはなりますが、imgをwidth:
100%  height:
autoの値にしても上位のdivにｐｘが指定されており、その辺りも広げてあげないと子要素のimgが拡大されないようです。
そこでscript要素直下のdivの値を100% &　autoにしたところ、動画が消えてしまいます。
heightをpx（たとえば200px）にすると表示されました。

現時点で、自動生成されたdivとCSSの上書きをどこでどのようにすればよいか苦戦しております。
もし、何かヒントがございましたら宜しくお願い致します。
もう少しいじり倒してみたいと思います。
急ぎではございません。
引き続きよろしくお願い致します。

Answer

ECマスターズの伊藤です。

ご確認くださいましてありがとうございました。

先にご案内した方法ですが、動画(HTMLソース）に
記載した場合のご案内となっておりました。


を直接商品背地名分などに貼り付けて頂いているようでしたら
下記のコードをお試しいただけますでしょうか。

お手数おかけいたしますが、よろしくお願いいたします。

＝＝＝＝＝＝＝＝＝

【ここに動画をはりつけ】




div#video_container > *{
width: 100%!important;
height: calc(100vw * 0.6)!important;
}

.RVideoPF-Player-TitleImagePlugin-Image{
width:100%!important;
height:auto!important;
}