<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
<style>
.
box {
position:
relative;
width:
50vw;
margin:
20px auto;
background:
orange;
--aspect-ratio:
1;
}
.
box > :
first-child {
width:
100%;
position:
absolute;
top:
0;
left:
0;
height:
100%;
}
.
box::
before {
content:
"";
display:
block;
padding-bottom:
calc(
100% / (
var(
--aspect-ratio)));
}
section {
display:
grid;
grid-template-columns:
repeat(
16,
6.25vw);
grid-auto-rows:
6.25vw;
}
section div {
grid-column:
span 16;
grid-row:
span 9;
}
section iframe {
width:
100%;
height:
100%;
}
</style>
</head>
<body>
<div class="box">
<iframe src="https://www.youtube.com/embed/upPCohrJcbw?showinfo=0&modestbranding=1" frameborder="0"
allowfullscreen=""></iframe>
</div>
<section>
<div>
<iframe src="https://www.youtube.com/embed/upPCohrJcbw?showinfo=0&modestbranding=1" frameborder="0"
allowfullscreen=""></iframe>
</div>
</section>
</body>
</html>
转载请注明原文地址: https://www.6miu.com/read-36628.html
