在所有屏幕上保持相同的宽高比 iframe-解网

问：

我希望无论您使用什么设备，youtube iframe 都具有相同的纵横比。因此，当屏幕为 720px 或更小时，iframe 的宽度为屏幕的 100%，高度将更改为 16：9 的相同纵横比

我尝试过高度：自动并使用填充来修复它，但没有任何效果

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #7AE7C7;
  text-align: center;
}

nav{
  background-color: #0b4e2d;
  font-size:18px;
  padding:6px;
  margin: 0;
  width: 100%;
}

ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  position: relative;
  color: white;
  margin-left: 15px;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

ul a {
  color: white;
  text-decoration: none;
}

ul a:hover {
  text-decoration: underline;
}

iframe{
  display: block;
  margin: 25px auto;
  border: 5px solid white;
  border-radius: 15px;
  background-color: white;
}

h1 {
    font-family: 'Open Sans', sans-serif;
    font-size: 56px;
  text-align: center;
}

h2 {
    font-family: 'Open Sans', sans-serif;
  text-align: center;
}

h3 {
    font-family: Helvetica, sans-serif;
    font-size: 24px;
  text-align: center;
    font-weight: 10;
}

/* Mobile devices */
@media screen and (max-width: 720px) {
iframe{
  width: 100%;
  height: auto;
}
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <link href="https://grocerystorerblx.github.io/style.css" rel="stylesheet" type="text/css" />

</head>

<body>
  <nav>
    <ul>
      <li><a href="https://grocerystorerblx.github.io/">Home</a></li>
      <!-- <li><a href="">Fan Art</a></li> !-->
      <li><a href="https://grocerystorerblx.github.io/devlog">Dev Log</a></li>
      <li><a href="https://grocerystorerblx.github.io/credits">Credits</a></li>
      
    </ul>
  </nav>

  <iframe width="720" height="405" src="https://www.youtube.com/embed/OfDQD1vwsc4?si=hYtyXVJaSg7q_fpz" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<h2>Countdown to Grocery Store 2's Release Date</h2>
<script src="https://grocerystorerblx.github.io/script.js"></script>
<h3 id="countdown"></h3>
</body>

</html>

HTML CSS iframe

在所有屏幕上保持相同的宽高比 iframe

Keep iframe in the same aspect ratio on all screens

评论