zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Video von youtube responsive in Webseite einbauen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #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
  #2 (permalink)  
Alt 28.01.2019, 22:39
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 142
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Sorry... so wird das nichts!
Du machst dir Gedanken über ein responsive Video... aber wie soll das gehen, wenn der Rest der Seite absolut nicht responsiv ist.
Teste doch mal einfach mit deinem Code, wie sich die Seite verhält, wenn du das Browserfenster kleiner machst. Wo und wie soll da dein Video responsive untergebracht werden... im Briefmarkenformat?
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Responsive Webseite Soelg CSS 1 01.05.2018 06:14
Floaten Responsive Webseite Soelg CSS 6 13.04.2017 14:09
responsive Webseite runner CSS 4 14.09.2015 22:45
YouTube Videos XHTML Valide einbauen? axelm (X)HTML 2 14.06.2008 17:11
Kl. Gästebuch und Counter in Webseite einbauen. Einige Fragen tifi (X)HTML 3 20.11.2006 17:59


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:17 Uhr.