Bootstrap - Videos einbinden

Fastel · 17. November 2022

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>

NatokWa · 17. November 2022

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 ........

savuti · 17. November 2022

Ist iframe auf width 100% gesetzt?
Ohne Link zur Seite ist das ein reines Ratespiel.

Fastel · 17. November 2022

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>

Midnight Sun · 17. November 2022

Die nötigen Infos dazu sind auf der Seite von Bootstrap zu finden: https://getbootstrap.com/docs/4.0/utilities/embed/

Fastel · 17. November 2022

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(?).

Fastel · 19. November 2022

Hat noch jemand eine Idee oder Tip?

Suche

Bootstrap - Videos einbinden

Fastel

Cadet 4th Year

NatokWa

Lt. Commander

savuti

Lt. Commander

Fastel

Cadet 4th Year

Midnight Sun

Commander

Fastel

Cadet 4th Year

Fastel

Cadet 4th Year

Ähnliche Themen