Question

我希望我的嵌入式视频可以调整到网站的移动宽度，而不是超出范围。这是我的HTML代码：

I want to display all the enteries in the job child below.

为了做到这一点，我必须在CSS代码中加入什么？

Answer 1

我认为这应该有效：

.videos, .videos iframe {
width: 100%;
}

Answer 2

由于你是在网站的移动宽度之后（你的意思是浏览器？），你可以简单地设置宽度：100vw;

<iframe width="100vw"
          src="https://www.youtube.com/embed/LCDLaQkAASU"
          frameborder="0" allowfullscreen></iframe>

vw设置视口宽度。通过将其设置为100，iframe的宽度将设置为浏览器的整个宽度。如果您希望它是移动响应，我建议您使用@media查询来设置阻止点。

Answer 3

您需要在CSS中使用wrap类视频：

.video {
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; 
    overflow: hidden; 
    max-width: 100%;
}

.video iframe, .videos object, .video embed {
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    position:absolute;
}

将每个视频放在它上面，就像这样

<section class="videos">
    <div class="video">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/LCDLaQkAASU" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class="video">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/S-OMryYGuhA" frameborder="0" allowfullscreen></iframe>
    </div>
</section>

Answer 4

你可以尝试这个CSS代码：

Int

调整嵌入式视频链接HTML的大小

4 个答案: