Responsive iframe, wie Überlaufrand zu entfernen

Question

Ich versuche, ein Video mit einem iframe einzubetten, aber ich bekomme einige lästige Überlaufpolsterung, die ich nicht loswerden kann.

Der Code an der Spitze ist eine Möglichkeit, einen Iframe in einen ansprechenden Stil zu zwingen, so dass Sie ihn auf dem Handy anzeigen können.

Im Grunde steuert der "Padding-bottom" -Code das Seitenverhältnis des Frames.

bekam ich den Code von hier:

https://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/

Ich habe hier geprüft: Making responsive iframe und das lässt mich mit schrecklichen Überlauf zu.

ist das Ergebnis unten:

Image displaying overflow issue

.video-container { 
 
    position: relative; 
 
    padding-bottom: 56.25%; 
 
    padding-top: 0px; 
 
    padding-right: 0px; 
 
    height: 0; 
 
    overflow: hidden; 
 
} 
 

 
.video-container iframe { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0px; 
 
    right: 0px; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
</style>

<div class="video-container"> 
 
    <iframe scrolling="no" src="https://06-lvl3-pdl.vimeocdn.com/01/4345/3/96727205/257828362.mp4?expires=1497358367&token=0ef4c2c1316f5f76d532a" frameBorder="0"></iframe> 
 
</div>

der padding-bottom-Wechsel: bis 56,35% bewegt nur die schwarze Überlaufleitung mit dem unteren Rand des Video anstelle von die Seite.

Answer 1

Höhe 100vh wird zu 100% Darstellungs nehmen und margin:0 und padding:0 entfernen Standardeigenschaften.

Fügen Sie einfach

.video-container { 
    position: relative; 
} 

.video-container iframe { 
    position: absolute; 
    top: 0; 
    left: 0px; 
    width: 100%; /* Add this */ 
    height: 100vh; /* Add this */ 
    padding:0px; /* Add this */ 
    margin:0px; /* Add this */ 
} 

.video-container { 
 
    position: relative; 
 
} 
 

 
.video-container iframe { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0px; 
 
    width: 100%; 
 
    height: 100vh; 
 
    padding:0px; 
 
    margin:0px; 
 
}

<div class="video-container"> 
 
    <iframe scrolling="no" src="https://06-lvl3-pdl.vimeocdn.com/01/4345/3/96727205/257828362.mp4?expires=1497358367&token=0ef4c2c1316f5f76d532a" frameBorder="0"></iframe> 
 
</div>

Answer 2

ich dies nur statt tat. Es funktioniert - umgeht das Benutzer-Agent-Stylesheet, das von Chrome verwendet wird, und wendet das richtige Styling an.

<style type="text/css"> 
.video-container { 
    position: relative; 
    padding-bottom: 56.25%; 
    padding-top: 0px; 
    padding-right: 0px; 
    height: 0; 
    border: 0; 
    overflow: hidden; 
} 
</style> 

<div class="video-container"> 
    <video style="width:100%;" src="https://06-lvl3-pdl.vimeocdn.com/01/4345/3/96727205/257828362.mp4?expires=1497358367&token=0ef4c2c1316f5f76d532a" controls autoplay type="video/mp4"></video> 
</div>