Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 28.01.2019, 16:01
R14 R14 ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.08.2018
Beiträge: 4
R14 befindet sich auf einem aufstrebenden Ast
Standard Video von youtube responsive in Webseite einbauen

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. Es soll im youtube-Grössenverhältnis angezeigt werden.

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


Code:
<!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>
Gruss
Mit Zitat antworten
Sponsored Links