Ergebnis 1 bis 5 von 5

Thema: Video von youtube responsive in Webseite einbauen

  1. #1
    Youngster
    Registriert seit
    06.05.2018
    Beiträge
    19
    Danke
    6
    Bekam 0 mal "Danke" in 0 Postings

    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.


    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-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>
    Gruss
    Geändert von R18 (20.01.2019 um 01:48 Uhr)

  2. #2
    Samurai
    Registriert seit
    23.01.2018
    Ort
    Minden
    Beiträge
    234
    Danke
    0
    Bekam 31 mal "Danke" in 31 Postings

    Standard AW: Video von youtube responsive in Webseite einbauen

    wo ist denn da ein video zu sehen ?

  3. #3
    Youngster
    Themenstarter

    Registriert seit
    06.05.2018
    Beiträge
    19
    Danke
    6
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Video von youtube responsive in Webseite einbauen

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

    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>
    Geändert von R18 (21.01.2019 um 14:23 Uhr)

  4. #4
    HTML Newbie
    Registriert seit
    28.01.2019
    Beiträge
    6
    Danke
    0
    Bekam 1 mal "Danke" in 1 Posting

    Standard AW: Video von youtube responsive in Webseite einbauen

    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>

  5. Folgende User finden die Antwort von Cipha gut:

    R18

  6. #5
    Youngster
    Themenstarter

    Registriert seit
    06.05.2018
    Beiträge
    19
    Danke
    6
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Video von youtube responsive in Webseite einbauen

    Klappt. Vielen Dank.

Ähnliche Themen

  1. Responsive Image auf Webseite
    Von Denis Jurkovsek im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 24.02.2018, 15:48
  2. CSS Responsive Video - Keine Anpassung möglich
    Von microschock im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 11.10.2017, 18:07
  3. Responsive Buttons auf Video
    Von Yuyupie im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 13.01.2017, 15:36
  4. Youtube Video
    Von Happy im Forum Off Topic und Quasselbox
    Antworten: 13
    Letzter Beitrag: 06.10.2007, 14:29
  5. video wie bei youtube einbinden
    Von gast im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 20.06.2007, 17:47

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •