3
YouTube-Video responsiv einbauen - aber nicht über die ganze Seite
Hallo Leute!
Ich möchte auf meiner Homepage ein YouTube-Video einbetten, welches grundsätzlich die Maße 854x480 haben und auch so auf der Seite angezeigt werden soll. Durch den Code, den man von YouTube bekommt, sind das ja eigentlich die Standard-Maße:
ABER - jetzt kommt mein Problem:
Ich möchte, dass das Ganze automatisch verkleinert wird, wenn das Fenster angepasst wird oder die Auflösung, wie auch immer... Dazu habe ich im Netz schon gesucht und folgenden Ansatz gefunden:
1. Das Frame in ein DIV packen und "benennen":
2. Das Ganze dann über CSS "einrichten":
Das funktioniert so weit grundsätzlich - aber jetzt ist das Video über die ganze Seite gestreckt! Es sollte aber maximal 854px breit sein (und entsprechend dann 480 hoch)! Wenn das Fenster dann verkleinert wird, soll auch das Video verkleinert werden, während das Seitenverhältnis natürlich bestehen bleiben soll.
UND: Es sollen auch keine schwarzen Balken o.ä. dabei entstehen und das Video soll letztlich zentriert/mittig auf der Seite sein!!
Ich bin jetzt kein Programmierer o.ä. und daher weiß ich einfach nicht, wo ich das einstellen muss bzw. was ich da am Code anpassen muss. Daher würde ich mich sehr freuen, wenn mir das jemand von euch sagen kann!?! Ich habe zwar mal etwas herumgespielt, aber im Endeffekt habe ich mit entweder immer alles "zerschossen" oder es waren plötzlich schwarze Balken im Video...
Ich möchte auf meiner Homepage ein YouTube-Video einbetten, welches grundsätzlich die Maße 854x480 haben und auch so auf der Seite angezeigt werden soll. Durch den Code, den man von YouTube bekommt, sind das ja eigentlich die Standard-Maße:
<iframe src="https://www.youtube.com/embed/xyz" width="854" height="480"></iframe> ABER - jetzt kommt mein Problem:
Ich möchte, dass das Ganze automatisch verkleinert wird, wenn das Fenster angepasst wird oder die Auflösung, wie auch immer... Dazu habe ich im Netz schon gesucht und folgenden Ansatz gefunden:
1. Das Frame in ein DIV packen und "benennen":
<div class="embed-container" align="center"><iframe src="https://www.youtube.com/embed/xyz" width="854" height="480"></iframe></div> 2. Das Ganze dann über CSS "einrichten":
.embed-container {
position: relative;
padding-bottom: 56.154747948417%;
height: 0;
overflow: hidden;
width: 100%;
height: auto;
}
.embed-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}Das funktioniert so weit grundsätzlich - aber jetzt ist das Video über die ganze Seite gestreckt! Es sollte aber maximal 854px breit sein (und entsprechend dann 480 hoch)! Wenn das Fenster dann verkleinert wird, soll auch das Video verkleinert werden, während das Seitenverhältnis natürlich bestehen bleiben soll.
UND: Es sollen auch keine schwarzen Balken o.ä. dabei entstehen und das Video soll letztlich zentriert/mittig auf der Seite sein!!
Ich bin jetzt kein Programmierer o.ä. und daher weiß ich einfach nicht, wo ich das einstellen muss bzw. was ich da am Code anpassen muss. Daher würde ich mich sehr freuen, wenn mir das jemand von euch sagen kann!?! Ich habe zwar mal etwas herumgespielt, aber im Endeffekt habe ich mit entweder immer alles "zerschossen" oder es waren plötzlich schwarze Balken im Video...
Share on Facebook
Share on Twitter
Share on Reddit
Share on LinkedinPlease also mark the comments that contributed to the solution of the article
Content-Key: 370671
Url: https://administrator.de/contentid/370671
Printed on: April 23, 2024 at 23:04 o'clock
3 Comments
Latest comment
Es sollte aber maximal 854px breit sein (und entsprechend dann 480 hoch)!
Stichwort: max-width und max-height<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<style type="text/css">
.youtubecontainer {
position:relative;
width:100vw;
height:56vw;
max-width:854px;
max-height:480px;
overflow:hidden;
}
.youtubecontainer iframe {
position:absolute;
width:100%;
height:100%;
left:0;
}
</style>
<body>
<div class="youtubecontainer"><iframe src="https://www.youtube.com/embed/xyz" width="854" height="480" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
</body>
</html>Gruß Schnuffi
Hi Schnuffi,
erst einmal danke, funktioniert im Prinzip. Aber ich hätte noch eine Sache:
Hier ist bei der Verkleinerung der Seite das Video links und rechts trotzdem ganz am Rand des Fensters "fixiert". Ich habe mal gesehen, wie ein Video quasi "stufenweise" mit verkleinert wurde, wobei dann aber (bis zu einem gewissen Punkt natürlich, wenn es zu klein war) das Video trotzdem immer noch einen Abstand zum Fensterrand hatte.
Gibt es da noch was zu ergänzen?
erst einmal danke, funktioniert im Prinzip. Aber ich hätte noch eine Sache:
Hier ist bei der Verkleinerung der Seite das Video links und rechts trotzdem ganz am Rand des Fensters "fixiert". Ich habe mal gesehen, wie ein Video quasi "stufenweise" mit verkleinert wurde, wobei dann aber (bis zu einem gewissen Punkt natürlich, wenn es zu klein war) das Video trotzdem immer noch einen Abstand zum Fensterrand hatte.
Gibt es da noch was zu ergänzen?
Hier ist bei der Verkleinerung der Seite das Video links und rechts trotzdem ganz am Rand des Fensters "fixiert
Na das kannst du ja nach Belieben ändern, dafür ist CSS ja da .Ich habe mal gesehen, wie ein Video quasi "stufenweise" mit verkleinert wurde
Das wird es hier ja ebenfalls! K.A. was du uns sagen willst.das Video trotzdem immer noch einen Abstand zum Fensterrand hatte.
Das brauchst du nur mit einem Padding oder Margin des DIVs festlegen, du solltest dich ehrlich gesagt erst mal mit den CSS Grundlagen beschäftigen, das ist hier ja kein Grundkurs, aber mit den beiden Stuchworten solltest du jetzt selbst arbeiten können.
