Question

我有一个视频和一些标题。我想知道我怎样才能看到Letterboxd.com用于电影海报的类似外观。

这就是我的意思：

而不是图像我想要适合嵌入的视频和标题而不是用户名。

到目前为止，这是我的代码。

body {
  background-color: rgb(44, 54, 65);
}

div#title {
  text-align: center;
  color: #abc;
}

div#container {
  align-content: center;
  border-radius: 10px;
  margin: auto;
  border: 3px solid #9cf;
  padding: 10px;
  text-align: center;
  color: #F1ECE4;
  width: 560;
}

div#movie-information {
  padding: 1px;
  margin: -10px;
  text-align: center;
  color: #abc;
  background-color: #567;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: inherit;
  border-bottom-left-radius: inherit;
}

div#trailer-container {
  object-fit: fill;
}

index.html

<html>

<head>
  <title>Random Movie Trailer</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div id="title">
    <h1>Random Movie Trailer</h1>
  </div>
  <div id="container">
    <div id="trailer-container">
      <div>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/xG1hum1c4r8" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>
    <div id="movie-information">
      <h1>Norman (Norman: The Moderate Rise and Tragic Fall of a New York Fixer)</h1>
      <p>
        <div id="scores">Critics Score: 89% Users Score: 58%
        </div>
      </p>
    </div>
  </div>
</body>

</html>

Answer 1

大多数情况下，您必须摆脱填充，并让iframe填充框架的100％宽度和高度，如下所示：

https://jsfiddle.net/uct6hf5q/2/

#trailer-container {
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}

#trailer-container div iframe {
  width: 100%;
  height: 100%;
  display: block;
}

我还向容器添加了边框半径，因此iframe不会与边框重叠。

如何将嵌入视频插入父div？（像letterboxd海报一样）

1 个答案:

如何将嵌入视频插入父div？ （像letterboxd海报一样）

1 个答案:

如何将嵌入视频插入父div？（像letterboxd海报一样）