楽天　トップページでの動画表示サイズ

Question

楽天のトップページに動画を表示させるにあたり、
RMSの画像・動画登録＞動画管理　から
貼り付け用HTMLソースをコピペしていますが、思うように表示できません。

解決方法を教えて頂けないでしょうか？
以下、問題を列挙します。

●PC用
・動画サイズを630×360以上にしたい。
・センターに配置させたい。

●スマホ用
・スマホの横幅がスマホ画面におさまるように表示させたい。
HTMLのw=320&h=286の数値を100%にしたのですがうまくいきませんでした。

以上、お手数ですがよろしくお願いいたします。

Accepted Answer

ECマスターズの田中です。

> ●PC用
> ・動画サイズを630×360以上にしたい。

動画の貼り付け用HTMLソース内のURLに含まれる、横幅・高さの数値を手動で変更することで、
表示サイズをご変更いただくことができます。
なお、元ファイルのサイズは変わらないため、
表示サイズを大きくすると、画質が劣化しますことをお含みおき願います。

変更する数字につきまして、
貼り付け用HTMLソース内のURLは下記のような構造になっておりますので、
//stream.cms.rakuten.co.jp/gate/play/?w=横幅h=高さ&mid=＊＊＊＊＊＊
実際のソースで「横幅」「高さ」の位置にある数字をご変更願います。

> ・センターに配置させたい。

表示領域に、左右の余白を自動設定するスタイルシートを適用していただければ結構です。
たとえば、
margin: 0 auto !important;
という形になります。

> ●スマホ用
> ・スマホの横幅がスマホ画面におさまるように表示させたい。

動画の表示領域に、表示する最大サイズを制限するスタイルシートを適用していただければ結構です。

先のセンター配置と合わせて、たとえば下記のようなstyleタグになります。


div[id^=RVideo] {
	max-width: 100%;
	max-height: calc( 56.25vw );
	margin: 0 auto !important;
}

楽天 トップページでの動画表示サイズ

楽天　トップページでの動画表示サイズ