Utilizarea proprietății width
Dacă proprietatea width este setată la 100%, playerul video va fi responsiv și se va mări sau micșora.
Rețineți că playerul video poate fi mărit pentru a fi mai mare decât dimensiunea sa originală. În multe cazuri, o soluție mai bună este să folosiți în schimb proprietatea max-width.
Exemplu
Prompt
Creați o pagină cu un element video care folosește
width: 100% și height: auto pentru a-l face responsiv. Utilizați orice sursă video de exemplu (de exemplu, un videoclip demonstrativ din PromptCookbook). Videoclipul ar trebui să se mărească și să se micșoreze odată cu fereastra browserului.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Video with width</title>
<style>
video {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>Using The width Property</h1>
<p>Resize the browser window to see the effect.</p>
<video controls>
<source src="https://prompt-cookbook.com" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
Utilizarea proprietății max-width
Dacă proprietatea max-width este setată la 100%, playerul video se va micșora dacă este necesar, dar nu se va mări niciodată să fie mai mare decât dimensiunea sa originală.
Exemplu
Prompt
Creați o pagină cu un element video care folosește
max-width: 100% și height: auto pentru a-l face responsiv. Videoclipul ar trebui să se micșoreze atunci când este necesar, dar să nu devină niciodată mai mare decât dimensiunea sa originală.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Video with max-width</title>
<style>
video {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>Using The max-width Property</h1>
<p>Resize the browser window to see the effect. The video will scale down but never exceed its original size.</p>
<video controls>
<source src="https://prompt-cookbook.com" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
Adăugați un videoclip la pagina web exemplu
Puteți adăuga un videoclip la pagina dvs. web și îl puteți face responsiv setând width la 100% și height la auto. Videoclipul se va redimensiona pentru a ocupa întotdeauna tot spațiul disponibil.
Exemplu
Prompt
Creați un layout simplu de pagină web cu un antet, navigare, secțiune de conținut și un videoclip responsiv folosind
width: 100% și height: auto. Videoclipul ar trebui să umple întotdeauna spațiul disponibil din secțiunea de conținut.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video in Example Web Page</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
}
.header {
padding: 20px;
background: #1abc9c;
color: white;
text-align: center;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
.content {
padding: 20px;
}
video {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="header">
<h1>My Website</h1>
</div>
<div class="navbar">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="content">
<h2>Responsive Video</h2>
<p>The video below will always take up all the available space:</p>
<video controls>
<source src="https://prompt-cookbook.com" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</body>
</html>