Größe eines Videocontainers ändern

Question

Ich versuche, dieses Video um 75% oder 50% kleiner zu machen (aber wieder auf 100% in der mobilen Ansicht). Ich bin mir nicht sicher warum, aber das Hinzufügen einer Breite von 75% zu .videocontainer macht es kleiner, aber das Hinzufügen einer Höhe von 75% tut nichts. Vermutlich ist das Editieren des Child-Elementes nicht richtig, da es nur absolut 100% der Größe des Elternelements sein muss.

Warum ändert sich die Größe nicht richtig?

.video-container { 
 
    position: relative; 
 
    padding-bottom: 56.25%; 
 
    height: 0; 
 
    overflow: hidden; 
 
} 
 
.video-container iframe, .video-container object, .video-container embed { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
/* OTHER IRRELEVANT STUFF BELOW */ 
 
#first-sec { 
 
    background: lightblue; 
 
    width: 100%; 
 
    height: auto; 
 
    text-align: center; 
 
    padding: 150px 10% 100px 10%; 
 
    box-sizing: border-box; 
 
} 
 
h1 { 
 
    font-size: 62px; 
 
    text-transform: uppercase; 
 
    font-weight: 400; 
 
} 
 
p { 
 
    font-size: 22px; 
 
    font-weight: 300; 
 
    padding-top: 10px; 
 
} 
 
a.cta-button { 
 
\t border: none; 
 
\t border-radius: 6px; 
 
\t padding: 10px 20px; 
 
    border: 1px solid #333; 
 
    cursor: pointer; 
 
    background: orange; 
 
    font-size: 22px; 
 
    font-weight: 300; 
 
    color: #333; 
 
    text-decoration: none; 
 
    margin: 0; 
 
    display: inline-block; 
 
}

<section id="first-sec"> 
 
    <h1>header 1 here</h1> 
 
    <p>paragraph 1 here.</p> 
 
    <article class="video-container"> 
 
     <iframe width="100%" height="auto" src="https://www.youtube.com/embed/-YXf0-_WMTU?rel=0" frameborder="0" allowfullscreen class="video"></iframe> 
 
    </article> 
 
    <p>paragraph 2 here:</p> 
 
    <a class="cta-button" href="#">button</a> 
 
    </section>

Answer 1

Ich bin nicht sicher, warum, aber eine Breite von 75% Zugabe macht es kleiner, aber eine Höhe von 75% bis .video-Behälter Zugabe nichts tut.

Da der Trick hinter dieser Methode ist, dass es im Spiel keine Höhe überhaupt ist, und das Element wird stattdessen durch die Polsterung spannt up - das ist, was macht die Arbeit hier in erster Linie „das Seitenverhältnisses zu respektieren“ Mit der Breite & Höhe konnte man das nur nicht erreichen.

Wenn Sie die Breite für .video-container ändern, wird es nicht funktionieren, weil Polsterung in Prozent auf den enthalten Blöcke basiert Breite - das heißt, müssen Sie ein zusätzliches Container-Element einzufügen:

.video-container { 
 
    width: 50%; 
 
} 
 
.video-container-inner { 
 
    position: relative; 
 
    padding-bottom: 56.25%; 
 
    height: 0; 
 
    overflow: hidden; 
 
} 
 
.video-container iframe, .video-container object, .video-container embed { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
/* OTHER IRRELEVANT STUFF BELOW */ 
 
#first-sec { 
 
    background: lightblue; 
 
    width: 100%; 
 
    height: auto; 
 
    text-align: center; 
 
    padding: 150px 10% 100px 10%; 
 
    box-sizing: border-box; 
 
} 
 
h1 { 
 
    font-size: 62px; 
 
    text-transform: uppercase; 
 
    font-weight: 400; 
 
} 
 
p { 
 
    font-size: 22px; 
 
    font-weight: 300; 
 
    padding-top: 10px; 
 
} 
 
a.cta-button { 
 
\t border: none; 
 
\t border-radius: 6px; 
 
\t padding: 10px 20px; 
 
    border: 1px solid #333; 
 
    cursor: pointer; 
 
    background: orange; 
 
    font-size: 22px; 
 
    font-weight: 300; 
 
    color: #333; 
 
    text-decoration: none; 
 
    margin: 0; 
 
    display: inline-block; 
 
}

<section id="first-sec"> 
 
    <h1>header 1 here</h1> 
 
    <p>paragraph 1 here.</p> 
 
    <article class="video-container"> 
 
     <div class="video-container-inner"> 
 
     <iframe width="100%" height="auto" src="https://www.youtube.com/embed/-YXf0-_WMTU?rel=0" frameborder="0" allowfullscreen class="video"></iframe> 
 
     </div> 
 
    </article> 
 
    <p>paragraph 2 here:</p> 
 
    <a class="cta-button" href="#">button</a> 
 
    </section>