2016-10-25 4 views
1

Ich entwerfe eine Bootstrap-Site mit einem Video-Banner auf der Homepage, ähnlich wie AirBnB. Wenn ich die Wiedergabetaste drücke, möchte ich die Seite ausblenden und ein YouTube-Video über den Inhalt der Website abspielen. Ein Beispiel wäre KindlyCare Play video Taste. Wenn Sie diese Wiedergabetaste drücken, wird das Video oben auf dem Rest der Website geladen. Wie kann ich dem YouTube-Player mitteilen, dass er über die Website geladen und nicht auf der Website eingebettet werden soll?Video über den Rest der Website auf Knopfdruck abspielen

bearbeiten Ich bin mit Bootstrap

+2

Ich empfehle, etwas wie Bootstrap Modal und HTML5-Video mit Autoplay. Hast du darüber nachgedacht? –

+0

Ich denke, Sie können den Youtube-Player nicht öffnen, ohne Ihr Video auf der Website einzubetten .... vielleicht, was Sie wirklich brauchen, ist das Video in eine Art von Modal mit Autoplay oder Vollbild einbetten – DaniP

+0

Ich benutze Bootstrap, sieht aus wie Modal ist der weg zu gehen, wenn jemand eine antwort auf diese krank post –

Antwort

1

ein div Stellen, die eine höhere z-index als der Rest des Dokuments hat entweder mit entweder CSS (z-index: x;) oder jQuery ($("element").css("z-index", "x")), die abgedunkelt und enthält den YouTube-Player , die in Form eines Iframe- oder Embed-Elements vorliegen sollte. Wenn Sie auf die Schaltfläche klicken ($("element").on("click", ...) oder $("element").click(...)), dann blenden Sie diese dunkel div mit $("element").fadeIn().

Wenn es in der Form eines Skripts ist, stellen Sie sicher, dass das Element, auf das es ausgerichtet ist (entweder der Text oder etwas anderes), in das div über der Webseite geändert wird.

+0

Ich habe vergessen z-index, du hast recht das ist ein guter weg es zu tun. Allerdings verwende ich Bootstrap, also denke ich, ich kann nur ein modales verwenden (siehe Kommentar zu Frage) –

+0

Ah, Gotcha. Das macht Sinn, ich wusste nicht, dass du das benutzt hast. –

+0

Akzeptiert diese Antwort, da niemand sonst einen für bootstrap posted und ich habe es funktioniert –