Bootstrap - Videos einbinden

Fastel

Cadet 4th Year
Registriert
Aug. 2009
Beiträge
70
Hi ich "lerne" grade Bootstrap. Bisher bin ich mit Nachdenken und Recherche immer weiter gekommen aber jetzt stecke ich tief fest.

Ich möchte ein Video einbetten und es soll die maximale Bildschrimbreite (responsive) nutzen. Bei mir ist es immer nur etwa Thumbnail-groß (wenn ich width und height lösche). Außerdem kommt die Fehlermeldung "Video nicht verfügbar. Auf Youtube ansehen" Es soll aber unbedingt in der Seite laufen.

Hier funktioniert es gut aber irgendwo mache ich einen Fehler.

MeinCode:
HTML:
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8"
                        title="YouTube video player"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                        allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>
 
Hast du mal dem container eine feste Größe zugewiesen und damit getestet ? Du läst das nämisch Dynamisch und gibst "nur" die 16/9 vor ... Und "Dynamisch" heißt leider SEHR gerne das es die falschen anhaltspunkte dafür nimmt.
Es KANN aber auch sein das die anderen Bereiche drumrum (man sieht ja nicht den gesammten Seitenaufbau) schon den Platz beanspruchen ... es könnte also auch DORT helfen denen eine feste Größe (Pixel oder %) zu verpassen.
HTML ist mit HTML5 eine echte Herrausforderung geworden ggü. älteren Versionen ...... der Aufbau hat gewaltig an Logik verlohren wenn man mal wie ich mit HTML2 angefangen hat ........
 
Ist iframe auf width 100% gesetzt?
Ohne Link zur Seite ist das ein reines Ratespiel.
 
Naja wenn ich das Stück aus dem Kontext des gesamten Dokuments heraus isoliert nehme, dann geht es bei mir auch nicht. Was ist denn bei euch, wenn ihr das copy pasted und mit dem Liveserver öffnet?
ps: das mit der festen größe wollte ich ja eher vermeiden...

Hier:
HTML:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <link rel="manifest" href="/manifest.webmanifest">

    <style>

    </style>
</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item"
                        src="https://www.youtube.com/embed/zpOULjyy-n8" title="YouTube video player"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                        allowfullscreen>
                    </iframe>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous">
        </script>
</body>

</html>
 
Dann finde ich sie nicht...
Das heißt, wenn du das Beispiel auf der Bootstrap Seite in den Body kopierst, geht das Video über die ganze Bildschirmbreite?

Es ist aber auch so, dass ich generell eine Fehlermeldung bekomme "Video nicht verfügbar". Das ist aber bestimmt ein anderes Problem(?).
 
Zurück
Oben