18-CSS(反応画像、ビデオ)
8045 ワード
はんのうイメージ
<img>タグ
<style>
img{
width:100%;
/*max-width: 500px 이미지 최대 넓이 고정!*/
}
</style>background-image
<style>
width: 100vw;
height: 100vh;
background-image: url(https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8Y2l0eXxlbnwwfHwwfHw%3D&w=1000&q=80);
background-repeat: no-repeat;
background-size: cover; /*contain 사용하면 최대한으로 늘리는것이기에 여백이 생길 수 있음*/
background-position: center; /*반응형으로 해주기위한 장치!*/
</style>
<body>
<article></article>
</body>
bacground-size用coverなら?
リアクションフィルム
<ビデオ>ラベル
ビデオタグのように、同じwidth 100%を与えるだけで反応します!
ビデオのプロパティ
preload =“none”, “auto”; : ページのロード時にビデオをプリロードするかどうかを確認します
ポッドキャスト:ビデオをダウンロードまたは再生する前に表示する画像を指定します.
≪制御｜Control｜ldap≫:ブラウザが再生に必要なコントローラを提供するかどうかを指定します.
Autoplay: ダウンロードが完了した後にファイルが自動的に再生されるかどうかを指定するプロパティです.
Muted:音を消す
ループ:ビデオの終了後に繰り返し再生するかどうかを指定します.
<iframe>タグ
<iframe
class="video-next-level"
src="https://www.youtube.com/embed/4TWR90KJl84?autoplay=1&mute=1&loop=1&playlist=4TWR90KJl84&controls=1"
title="YouTube video player"
frameborder="0"
allowfullscreen>
</iframe>
反応型に合わせるなら?
.video-next-level {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
問題は?スケールによって黒い余白が生成されます!
解決しますね.
ex)元の寸法:1280720
720/1280 = 0.5625
したがってpadding-top=0.5625100=56.25%
.cont-video {
position: relative;
padding-top: 56.25%;
/* padding-top, padding-bottom 속성의 % 값은 부모 요소의 넓이에 비례한다. */
/* 예를 들어 부모의 넚이가 1200px 이라면 padding-top=50% 의 값은 600px 과 같다. */
} <article class="cont-video">
<iframe
class="video-next-level"
src="https://www.youtube.com/embed/4TWR90KJl84?autoplay=1&mute=1&loop=1&playlist=4TWR90KJl84&controls=1"
title="YouTube video player"
frameborder="0"
allowfullscreen
></iframe>
</article><article>태그で包み、articleラベルに置く:相対、<iframe>태그はposition:絶対値を与え、paading-top比率を計算して入れる!Reference
この問題について(18-CSS(反応画像、ビデオ)), 我々は、より多くの情報をここで見つけました https://velog.io/@sgsg9447/TIL18-CSS-반응형-이미지-동영상テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol