トレーニング-(14)ビデオプレーヤー
Video Player
😀 html
htmlコード
<video>
<source src="./assets/염따(YUMDDA) - 9ucci REMIX (feat. Paloalto, Jessi, UNEDUCATED KID, The Quiett).mp4" />
<source src="./assets/염따(YUMDDA) - 9ucci REMIX (feat. Paloalto, Jessi, UNEDUCATED KID, The Quiett).mp4" />
</video>
<h1>염따 - 9ucci REMIX</h1>
<p> flex 해버렸지 모얌~ </p>
結果画面
😀 cssを加える
cssコード
index.html<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Video Player</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div class="video-player">
<div class="video-container">
<video controls>
<source src="./assets/염따(YUMDDA) - 9ucci REMIX (feat. Paloalto, Jessi, UNEDUCATED KID, The Quiett).mp4" />
<source src="./assets/염따(YUMDDA) - 9ucci REMIX (feat. Paloalto, Jessi, UNEDUCATED KID, The Quiett).mp4" />
</video>
</div>
<div video-player-info>
<h1>염따 - 9ucci REMIX</h1>
<p> flex 해버렸지 모얌~ </p>
</div>
</div>
</body>
</html>
styles.css@import url(https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css);
* {
margin: 0;
box-sizing: border-box;
}
html {
font-family: 'SpoqaHanSans';
font-size: 16px;
line-height: 1.5;
color: #1f2d3d;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
margin: 0 auto;
background-color: #f8f9fa;
}
body::after {
content: 'frenchkebab©';
display: block;
margin-top: 50px;
color: #1f2d3d;
font-size: 12px;
font-weight: 600;
}
.video-player {
width: 100%;
max-width: 400px;
border-radius: 4px;
overflow: hidden;
transition: box-shadow 200ms;
}
.video-player:hover {
box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.05);
}
.video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.24%;
overflow: hidden;
}
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-player-info {
background-color: #fff;
padding: 8px 10px 10px;
}
.video-player-info h1 {
margin-bottom: 2px;
font-size: 16px;
letter-spacing: -0.03em;
color: #383838;
}
.video-player-info p {
font-size: 13px;
letter-spacing: -0.03em;
color: #8e8e93;
}
結果画面
😀 知っておくべきこと。
😎 複数の拡張子を挿入する場合は、次の手順に従います。
ビデオラベルにはsrc属性は含まれていませんが、個別のsourceラベルを使用します.
Reference
この問題について(トレーニング-(14)ビデオプレーヤー), 我々は、より多くの情報をここで見つけました
https://velog.io/@frenchkebab/html-훈련-14-Video-Player
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
<video>
<source src="./assets/염따(YUMDDA) - 9ucci REMIX (feat. Paloalto, Jessi, UNEDUCATED KID, The Quiett).mp4" />
<source src="./assets/염따(YUMDDA) - 9ucci REMIX (feat. Paloalto, Jessi, UNEDUCATED KID, The Quiett).mp4" />
</video>
<h1>염따 - 9ucci REMIX</h1>
<p> flex 해버렸지 모얌~ </p>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Video Player</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div class="video-player">
<div class="video-container">
<video controls>
<source src="./assets/염따(YUMDDA) - 9ucci REMIX (feat. Paloalto, Jessi, UNEDUCATED KID, The Quiett).mp4" />
<source src="./assets/염따(YUMDDA) - 9ucci REMIX (feat. Paloalto, Jessi, UNEDUCATED KID, The Quiett).mp4" />
</video>
</div>
<div video-player-info>
<h1>염따 - 9ucci REMIX</h1>
<p> flex 해버렸지 모얌~ </p>
</div>
</div>
</body>
</html>
@import url(https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css);
* {
margin: 0;
box-sizing: border-box;
}
html {
font-family: 'SpoqaHanSans';
font-size: 16px;
line-height: 1.5;
color: #1f2d3d;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
margin: 0 auto;
background-color: #f8f9fa;
}
body::after {
content: 'frenchkebab©';
display: block;
margin-top: 50px;
color: #1f2d3d;
font-size: 12px;
font-weight: 600;
}
.video-player {
width: 100%;
max-width: 400px;
border-radius: 4px;
overflow: hidden;
transition: box-shadow 200ms;
}
.video-player:hover {
box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.05);
}
.video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.24%;
overflow: hidden;
}
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-player-info {
background-color: #fff;
padding: 8px 10px 10px;
}
.video-player-info h1 {
margin-bottom: 2px;
font-size: 16px;
letter-spacing: -0.03em;
color: #383838;
}
.video-player-info p {
font-size: 13px;
letter-spacing: -0.03em;
color: #8e8e93;
}
Reference
この問題について(トレーニング-(14)ビデオプレーヤー), 我々は、より多くの情報をここで見つけました https://velog.io/@frenchkebab/html-훈련-14-Video-Playerテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol