Frage Youtube Player responsive in Artikeln.

[Railgun]

Leider habe ich gerade nicht die Möglichkeit das PNG kleiner zu machen daher habe ich es extern hochladen müssen.

Wie dem auch sei, die Einbindung wie zu sehen ist nicht optimal, da diese nicht responsive gestaltet ist, der iframe / div Container sollte geg. Nochmals überarbeitet werden so dass dieser nur so groß ist wie der Text.

Ich nutze dafür solch einen Code, (nur ein Beispiel)

<div class="video-container"><iframe src="https://www.youtube,...."  frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

.video-container {
    position: relative;
    padding-bottom: 50%;
    padding-top: 10px;
    height: 0;

}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

(Code kann geg. Fehler enthalten da ich derzeit unterwegs bin und es nicht überprüfen kann)


P.s. dass hier ist wohl auch nicht beabsichtigt....


Handy Nokia 6.1 Browser Firefox

 

[Igor Wallossek]

Hmm, das ist die Mobile Version. Webseite geht. Da muss mal jemand ran, stimmt. Danke für den Tipp

 

[Railgun]

Und hier ist der Player rechts etwas abgeschnitten

iPad 2018 Safari

 

[Igor Wallossek]

Schwierige Kost. Height 100% funktiert nämlich nicht. Zumindest kommt da auf Nicht-Apple-Zeug nicht das raus, was man gern hätte und ich habe hier nicht eine einzige Apfelstiege zum Testen. Ich habe mich bereits 2004 von diesen Produkten restlos verbschiedet..

 

[Railgun]

Naja..
Geht ja um die breite nicht um die höhe
Die Variable wäre doch dann
width
Oder nicht

das problem besteht auch im frefox unter windows, wenn man nicht die gesammte bildschirm breite nutzt. da entstehen scrollbalken die so denke ich nicht vorgesehn sind, die textblöcke werden autoamtisch verkleinert, der videoblog nicht, komischerweise wird der bildband wo die bilder drin sind richtig responsiv angezeigt

 

[Igor Wallossek]

Rückwirkend mache ichs nicht, aber die aktuellen Videos passen jetzt.

 

[Railgun]

cool hauptsache es passt dann