HTML/CSS 无法向上重新定位嵌入的视频

Question

我正在尝试将嵌入的视频向上移动。我已经尝试了很多东西，但我似乎无法找到如何做到这一点。

这是它现在的样子的截图:https://i.imgur.com/rPjZMbv.png

HTML代码:

<div class="movie">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/3TKDCQCTuzQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

CSS 代码:

.movie{
    display: block;
    position: relative;
    margin-bottom: 30%;
    margin-left: 12%;
}

如果我更改 margin-bottom 值，什么也不会发生。我也尝试过使用 bottom 和 margin-top -%，但也没有成功。

Answer 1

取决于文本是否与视频位于同一父容器中。如果不同，使用margin -，比如margin-top: -300px;，但是我不建议使用这个。如果您可以完全控制 html，请将文本和视频移动到同一个父容器，例如:

.containerx {
    display: flex;
    flex-wrap: wrap;
}

.movie {width: 33%; overflow: hidden;}
.text {width: 66%;}

<div class="containerx">
    <div class="movie">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/3TKDCQCTuzQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div>

之后只需要填充、边距等。