Video von youtube responsive in Webseite einbauen

R18

Ich habe eine Seite mit Flexbox. Nun möchte ich ein Video von einer anderen Webseite responsive in die Seite einbauen. Ich habe einfach mal den iFrame des Videos kopiert und dort, wo es hin soll, eingefügt und ihm ein width="100%" height="100%" gegeben. Nun ist das Video bei voll offener Seite so breit wie der Div-Container breit ist, in der Höhe wird es jedoch zusammengedrückt. Wenn ich den Text oberhalb kürzer mache, wird es auch nicht grösser.

Was ist im zugehörigen Div-Container nun anzugeben?

HTML

<!DOCTYPE HTML> 






<html lang="zxx"> 




<head> 




<meta charset="utf-8"> 




<meta name="viewport" content="width=device-width, initial-scale=1"> 




<title>Flexbox layout</title> 




<meta name="description" content="5G-freie Schweiz.ch - Informationen über 5G"> 




<meta name="viewport" content="width=device-width, initial-scale=1.0"> 




<style> 




*{ 




margin:0; 




padding:0; 




} 












body { 




background-color: #4e535d; 




display:flex; 




flex-direction:column; 




} 




header { 
width: 100%; 
height: 170px; 
background-color: #4e535d; 
color: white;
text-align: center; 
font-family: "Alien Encounters", "Arial Black", Verdana; 
} 












#unten img {




margin-top:16px;
height: 62px;




} 












#oben img { 




height: 164px; 




width: 1901px; 
















} 




nav { 




list-style-type: none; 




background-color:#2e3545; 




width:calc(100% - 10px);




























} 












nav li { 
display: inline-block;
margin-left: -4px;




} 












nav a { 




display: inline-block; 




color: white; 




font-family: Arial, Verdana, Sans-serif;




font-size: 0.83em; 




font-weight:600;




height:100%; 




width:100%; 




padding:17px 16px 20px 6px; 




text-decoration:none; 








} 




nav >ul> li:nth-child(1){ 




background-color: #6d7481;




border-right: 2px solid #4e535d; 




width: 140px; 




text-align:center; 




margin-left: 485px;




} 




nav >ul> li:nth-child(2){ 




background: #6d7481; 




width: 170px; 




text-align: center; 




} 




nav >ul> li:nth-child(3){ 




background: #6d7481; 




border-left: 2px solid #4e535d; 




border-right: 2px solid #4e535d; 




width: 110px; 




text-align: center;
 




} 




nav >ul> li:nth-child(4){ 




background: #6d7481; 




border-right: 2px solid #4e535d; 




width: 110px; 




text-align: center; 












}
















main{ 




display:flex; 




flex-direction:row; 




} 




#left,#rechts{ 




flex:1; 




margin:110px; 




padding:55px;




color: #e6e6e6;




font-family: Arial, Verdana, sans-serif;




font-size: 0.77em;












}








 




#mitte{ 




flex:6; 




display:flex; 




flex-direction:column; 




margin:-15px 0 0px 0; 




























} 












#mitte_eins,#mitte_zwei,#mitte_drei,#mitte_vier,#mitte_fünf{ 




min-height: 100px; 




font-family: Arial, Verdana, sans-serif;




font-size: 0.77em;




height:auto; 




margin-bottom:10px;




background-color: #55607e;




padding-top:85px;




padding-left:85px; 




padding-bottom:105px;




padding-right:85px;
































} 












#mitte_eins{ 




color:white; 




margin-top: 1.8em;




text-align: justify;












} 




#mitte_eins img{ 




float:right; 




padding:0 0 0px 10px; 




} 




#mitte_zwei{ 




color:white; 




margin-top:5em;




text-align: justify;




} 








#mitte_zwei img{ 




float:right; 




padding:0 0 10px 10px; 
}
















#mitte_drei{ 




color:white; 




margin-top:5em;




text-align: justify;




} 




#mitte_drei img{ 




float: right; 




padding:0 0 10px 10px; 




} 




#mitte_vier{ 




margin-top:5em;




color:white; 




text-align: justify; 




} 








#mitte_vier img{ 




float:right; 




padding:10px 0 10px 10px;
}








#mitte_fünf{ 




margin-top:5em;




color:white; 




text-align: justify; 




} 








#mitte_fünf img{ 




float:right; 




padding:10px 0 10px 10px;
}
















footer{ 




background: #2e3545; 




height: 55px; 




text-align:center; 




color:white;
 
font-family: Arial, Verdana, sans-serif;




font-size: 70%; 




line-height:5.5; 




margin:0 0px 0 0px;




margin-top: -3px;








 








} 








a {text-decoration: none;
}








</style> 








<body> 




<header> 




<div id="oben">
<img class="bildheader" src="Wolken.jpg" alt="Header"> 
  </div>
 








</header> 
















<nav> 




<ul class="nav"> 




<li><a href="index.html">Neuigkeiten</a></li> 




<li><a href="#buecherverzeichnis">Studien & Berichte</a></li> 




<li><a href="rezensionen.html">Videos</a></li> 




<li><a href="kontakt.html">Kontakt</a></li> 












</ul> 




</nav> 




<main> 
















<div id="left">
Hier könnten vielleicht Verweise gemacht werden auf wichtige Links. Hier könnten vielleicht Verweise gemacht werden auf wichtige Links. Hier könnten vielleicht Verweise gemacht werden auf wichtige Links.<br><br> Hier könnten vielleicht Verweise gemacht werden auf wichtige Links. Hier könnten vielleicht verweise gemacht werden auf wichtige Links. Hier könnten vielleicht Verweise gemacht werden auf wichtige Links.
</div> 




















<div id="mitte"> 




<div style="line-height:2.2;" id="mitte_eins"> 




















Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. <br><br> 








Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. <br><br>            




<a href="rezensionen.html#mitte_eins" style="color: white">Das Plocher-Energie-System - Ernstfried Prade, Roland Plocher&nbsp; &nbsp; <b> neu </b></a> <br><br>




<iframe width="100%" height="100%" src="https://www.youtube.com/embed/TAbuqoDSngU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>












 
















</div> 








</div> 




















<div id="rechts"> 




Hier könnten vielleicht Verweise gemacht werden auf wichtige Links. Hier könnten vielleicht Verweise gemacht werden auf wichtige Links. Hier könnten vielleicht Verweise gemacht werden auf wichtige Links.<br><br> Hier könnten vielleicht Verweise gemacht werden auf wichtige Links. Hier könnten vielleicht verweise gemacht werden auf wichtige Links. Hier könnten vielleicht Verweise gemacht werden auf wichtige Links.








</div> 
























</main> 




<footer> 




@ 2019 5G-freie Schweiz.ch




</footer> 




</body> 




</html>

Alles anzeigen

Gruss

basti1012

wo ist denn da ein video zu sehen ?

R18

Entfernt, da es nicht ganz funktionierte. Nochmals eingefügt. Fast ganz am Ende, bei div id mitte

HTML

<!DOCTYPE HTML> 






<html lang="zxx"> 




<head> 




<meta charset="utf-8"> 




<meta name="viewport" content="width=device-width, initial-scale=1"> 




<title>Flexbox layout</title> 




<meta name="description" content="5G-freie Schweiz.ch - Informationen über 5G"> 




<meta name="viewport" content="width=device-width, initial-scale=1.0"> 




<style> 




*{ 




margin:0; 




padding:0; 




} 












body { 




background-color: #4e535d; 




display:flex; 




flex-direction:column; 




} 




header { 
width: 100%; 
height: 170px; 
background-image: url("./images/Test3.jpg"); 
color: white;
text-align: center; 
font-family: "Alien Encounters", "Arial Black", Verdana; 
} 












#unten img {




margin-top:16px;
height: 62px;




} 












#oben img { 




height: 164px; 




width: 1901px; 
















} 




nav { 




list-style-type: none; 




background-color:#2e3545; 




width:calc(100% - 10px);




























} 












nav li { 
display: inline-block;
margin-left: -4px;




} 












nav a { 




display: inline-block; 




color: white; 




font-family: Arial, Verdana, Sans-serif;




font-size: 0.83em; 




font-weight:600;




height:100%; 




width:100%; 




padding:17px 16px 20px 6px; 




text-decoration:none; 








} 




nav >ul> li:nth-child(1){ 




background-color: #6e7481;




border-left: 2px solid #4e535d;  




border-right: 2px solid #4e535d; 




width: 140px; 




text-align:center; 




margin-left: 485px;




} 




nav >ul> li:nth-child(2){ 




background: #6e7481; 




width: 170px; 




text-align: center; 




} 




nav >ul> li:nth-child(3){ 




background: #6e7481; 




border-left: 2px solid #4e535d; 




border-right: 2px solid #4e535d; 




width: 110px; 




text-align: center;
 




} 




nav >ul> li:nth-child(4){ 




background: #6e7481; 




border-right: 2px solid #4e535d; 




width: 110px; 




text-align: center; 












}
















main{ 




display:flex; 




flex-direction:row; 




} 




#left,#rechts{ 




flex:1; 




margin:110px; 




padding:55px;




color: #e6e6e6;




font-family: Arial, Verdana, sans-serif;




font-size: 0.77em;












}








 




#mitte{ 




flex:6; 




display:flex; 




flex-direction:column; 




margin:-15px 0 0px 0; 




























} 












#mitte_eins,#mitte_zwei,#mitte_drei,#mitte_vier,#mitte_fünf{ 




min-height: 100px; 




font-family: Arial, Verdana, sans-serif;




font-size: 0.77em;




height:auto; 




margin-bottom:10px;




background-color: #55607e;




padding-top:85px;




padding-left:85px; 




padding-bottom:105px;




padding-right:85px;
































} 












#mitte_eins{ 




color:white; 




margin-top: 1.8em;




text-align: justify;












} 




#mitte_eins img{ 




float:right; 




padding:0 0 0px 10px; 




} 




#mitte_zwei{ 




color:white; 




margin-top:5em;




text-align: justify;




} 








#mitte_zwei img{ 




float:right; 




padding:0 0 10px 10px; 
}
















#mitte_drei{ 




color:white; 




margin-top:5em;




text-align: justify;




} 




#mitte_drei img{ 




float: right; 




padding:0 0 10px 10px; 




} 




#mitte_vier{ 




margin-top:5em;




color:white; 




text-align: justify; 




} 








#mitte_vier img{ 




float:right; 




padding:10px 0 10px 10px;
}








#mitte_fünf{ 




margin-top:5em;




color:white; 




text-align: justify; 




} 








#mitte_fünf img{ 




float:right; 




padding:10px 0 10px 10px;
}
















footer{




display:flex;




background-color: #2e3545;




height:135px;




justify-content: space-between;




align-items: center;




font-family: Arial, Verdana, sans-serif;




color: #d7d7d8;




padding: 10px;




margin-top:-6px;




}




.footer_left {




margin-left: 475px;




margin-top: 5px;




font-size: 0.8em;




line-height: 2.2em;








}




.footer_right{




text-align: right;




margin-right:475px;




margin-top: 5px;




font-size: 0.8em;




line-height: 2.2em;
}




.footer_center{




font-size:0.7em;




margin-top: 90px;




}












a {text-decoration: none;
}








</style> 








<body> 




<header> 




<div id="oben">
<img class="bildheader" src="Test3.jpg" alt="Header"> 
  </div>
 








</header> 
















<nav> 




<ul class="nav"> 




<li><a href="index.html">Neuigkeiten</a></li> 




<li><a href="#buecherverzeichnis">Studien & Berichte</a></li> 




<li><a href="rezensionen.html">Videos</a></li> 




<li><a href="kontakt.html">Kontakt</a></li> 












</ul> 




</nav> 




<main> 
















<div id="left">
Hier könnten vielleicht Verweise gemacht werden auf wichtige Links. Hier könnten vielleicht Verweise gemacht werden auf wichtige Links. Hier könnten vielleicht Verweise gemacht werden auf wichtige Links.<br><br> Hier könnten vielleicht Verweise gemacht werden auf wichtige Links. Hier könnten vielleicht verweise gemacht werden auf wichtige Links. Hier könnten vielleicht Verweise gemacht werden auf wichtige Links.
</div> 




















<div id="mitte"> 




<div style="line-height:2.2;" id="mitte_eins"> 




















Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. <br><br> 








Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. <br><br>            




<a href="rezensionen.html#mitte_eins" style="color: white">Das Plocher-Energie-System - Ernstfried Prade, Roland Plocher&nbsp; &nbsp; <b> neu </b></a> <br><br>




<iframe width="100%" height="100%" src="https://www.youtube.com/embed/TAbuqoDSngU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>












 
















</div> 








</div> 




















<div id="rechts"> 




Hier könnten vielleicht Verweise gemacht werden auf wichtige Links. Hier könnten vielleicht Verweise gemacht werden auf wichtige Links. Hier könnten vielleicht Verweise gemacht werden auf wichtige Links.<br><br> Hier könnten vielleicht Verweise gemacht werden auf wichtige Links. Hier könnten vielleicht verweise gemacht werden auf wichtige Links. Hier könnten vielleicht Verweise gemacht werden auf wichtige Links.








</div> 
























</main> 
<footer>




<div class="footer_left">
<b>Unser Netzwerk</b>
<p>www.asdfs.ch<p><p>www.asdraesas.ch</p><p>www.ehsdfsde.ch</p></div>




<div class="footer_center">
<p><u>@ 2019 5G-frei.ch</u></p></div>




<div class="footer_right">
<b>Andere Webseiten</b><p>www.asdergsegaserasdfs.ch</p><p>www.zrerrseserser.ch</p><p>www.tzrdrtedrtsdre.ch</p></div>




</footer>




</body> 




</html>

Alles anzeigen

Cipha

Bitte sehr

Code

<style>


.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* Seitenverhältnis von 16:9  -> 9/16*100 =56,25% */
    height: 0;
    overflow: hidden;
}




.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
</style>
<div class="videoWrapper">
<iframe src="https://www.youtube.com/embed/TAbuqoDSngU" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Alles anzeigen

R18

Klappt. Vielen Dank.

Tags