CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSを使用したHTMLビデオのアスペクト比の維持

要素のパディングをパーセンテージで指定することで、アスペクト比を維持できます。

これには、CSSパディングプロパティ-

を使用します

  • パディングボトム 要素の下部のパディングを指定します。

  • パディングトップ 要素の上部のパディングを指定します。

  • パディング-左 要素の左パディングを指定します。

  • パディング-右 要素の右パディングを指定します。

  • パディング 前述のプロパティの省略形として機能します。

例

次の例は、アスペクト比を維持するためのCSSパディングプロパティを示しています。

<!DOCTYPE html>
<html>
<head>
<style>
#demo {
   padding-top: 100%;
   box-shadow: 0 0 24px steelblue;
   position: relative;
   width: 100%;
}
div > div {
   margin: 10px;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   text-align: center;
}
</style>
</head>
<body>
<p>Watch the below div</p>
<div id="demo">
<div>Fun Ratio!</div>
</div>
</body>
</html>

出力

これにより、次の結果が生成されます-

CSSを使用したHTMLビデオのアスペクト比の維持

ウィンドウのサイズを変更した後でも、アスペクト比は1：1のままです。

CSSを使用したHTMLビデオのアスペクト比の維持

例

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 10%;
   padding-top: 56.25%;
   height: 0px;
   position: relative;
   box-shadow: 0 0 0 20px antiquewhite;
}
iframe {
   position: absolute;
   top: 0;
   height: 100%;
   width: 100%;
}
</style>
</head>
<body>
<div>
<iframe src="https://www.youtube.com/embed/0cwk9UMLnWE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-inpicture" allowfullscreen></iframe>
</div>
</body>
</html>

出力

これにより、次の結果が生成されます-

CSSを使用したHTMLビデオのアスペクト比の維持


  1. CSSですべてのプロパティをリセットする

    allプロパティを使用して、すべてのプロパティをリセットします。すべてのプロパティを初期、継承、または未設定に設定します。 例 次のコードを実行して、CSSallプロパティを実装してみてください <!DOCTYPE html> <html>    <head>       <style>          html {             color: blue;   &n

  2. CSSで個々の辺のパディングを定義する

    CSSを使用すると、要素にサイド固有のパディングを設定できます。 padding-top、padding-right、padding-bottom、およびpadding-rightプロパティは、それぞれ上、右、下、および左のパディングを定義します。パディングの省略形プロパティを使用して、時計回りに値を指定することで同じ出力を実現することもできます。 構文 CSSパディングプロパティの構文は次のとおりです- Selector {    padding-top: /*value*/    padding-right: /*value*/   &n