Bootstrap 4 Modal Video Autoplay und stoppen Sie, wenn Sie geschlossen sind

Das CSS -Framework, Bootstrap, hilft Entwicklern, reaktionsschnelle Websites zu entwickeln. Das Modal ist eine der wichtigsten Bootstrap -Komponenten, mit denen Sie Inhalte in einem Popup -Fenster anzeigen können. Der reaktionsschnelle Video -Modal kann jedoch auch in Bootstrap erstellt werden. JavaScript wird im Modalfenster implementiert, um wichtige Funktionen hinzuzufügen.

In diesem Artikel wird das Modal-Video-Autoplay von Bootstrap 4 beschrieben und stoppt, wenn sie geschlossen sind.

Bootstrap 4 Modal Video Autoplay und stoppen Sie, wenn Sie geschlossen sind

Das Video -Modal kann mit der Bootstrap -Modalklasse erstellt werden. Das modale Video -Popup besteht aus einem Video in einem Dialogfeld.

Voraussetzung: Erstellen Sie ein Modal

Fügen Sie zum Erstellen eines Modal den folgenden Code hinzu:

• Zuerst fügen Sie eine "hinzu""Element mit der Klasse"Container”.
• Darin fügen Sie eine hinzu “
  
  
  
  
  
  ×
  
  
  
  

  Fügen Sie den JavaScript -Code hinzu

  Um die richtige Funktionalität hinzuzufügen, fügen Sie den JavaScript -Code hinzu, indem Sie den Anweisungen folgen:

  • Fügen Sie ein "" Element hinzu.
  • Fügen Sie darin ein „$ (Dokument) hinzu.Ready () ”, der nur dann ausgeführt wird, wenn das DOM das JavaScript ausführt.
  • Erstellen Sie eine Variable “Videopath”Und weisen Sie der Variablen" SRC "der Daten auf Klick zu Variablen zu.
  • Greifen Sie dann mit der ID auf das Element zu und wenden Sie an “gezeigt.BS.modal”. Dadurch wird das Modal angezeigt und die Funktion ausgelöst. Die Funktion weist die SRC der Variablen "videopath" zur "zu" zu "