動画プレイヤーのサイズを可変にする(レスポンシブ対応)

設定方法

貼り付け先の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サイト等の開発者の方にご相談くださいませ。
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています
他にご質問がございましたら、リクエストを送信してください