設定方法
貼り付け先のWebサイト等にてHTMLとCSSを下記のように一部修正すると、動画プレイヤーのサイズを貼り付け先サイトの横幅に自動的に合わせることができるようになります。
※貼り付け先Webサイトがウィンドウサイズに対して可変(レスポンシブ対応)することが前提となります
■プレイヤーからコピーしたタグのHTML
<iframe width="480" height="270" src="https://cloud-player.1roll.jp/?v=AAAAAAAAAAAA" frameborder="0" allowfullscreen></iframe>
■iframeタグ内の「width」属性と「height」属性を削除します
<iframe src="https://cloud-player.1roll.jp/?v=AAAAAAAAAAAA" frameborder="0" allowfullscreen></iframe>
■「video」クラス属性を持ったdivタグでiframeタグを囲みます
<
div
class
=
"video"
>
<iframe src="https://cloud-player.1roll.jp/?v=AAAAAAAAAAAA" frameborder="0" allowfullscreen></iframe>
</div>
HTMLは以上で終了です。
■これらのタグに対応するCSSを記述します
下記のようにサイズを可変にするためのCSSを記述します。
.video{
position
:
relative
;
width
:
100%
;
padding-top
:
56.25%
;
}
.video iframe{
position
:
absolute
;
top
:
0
;
right
:
0
;
width
:
100%
;
height
:
100%
;
}
以上ですべて終了です。 HTML,CSS等の知識がない場合は、
貼り付け先のWebサイト等の開発者の方にご相談くださいませ。