Bootstrap 4 Modal Video Autoplay og stopp når det er stengt

CSS -rammeverket, Bootstrap, hjelper utviklere med å utvikle responsive nettsteder. Modalen er en av de viktige komponentene i bootstrap, som lar deg vise innhold i et popup -vindu. Imidlertid kan den responsive videomodalen også opprettes i Bootstrap. JavaScript implementeres i modalvinduet for å legge til store funksjonaliteter.

Denne oppskrivningen vil beskrive Bootstrap 4 Modal Video Autoplay og stoppe når det er stengt.

Bootstrap 4 Modal Video Autoplay og stopp når det er stengt

Video -modalen kan opprettes ved hjelp av Bootstrap Modal -klassen. Den modale videopopingen består av en video i en dialogboks.

Forutsetning: Lag en modal

For å opprette en modal, legg til følgende kode:

• Først, legg til en "”Element med klassen“container”.
• Inne i den, legg til en "
  
  
  
  
  
  ×
  
  
  
  

  Legg til JavaScript -koden

  For å legge til riktig funksjonalitet, legg til JavaScript -koden ved å følge instruksjonene:

  • Legg til et "" element.
  • Inne i det, legg til et “$ (dokument).klar () ”som bare kjører når DOM utfører JavaScript.
  • Lag en variabel “Videopat”Og tilordne“ SRC ”av dataene til variabelen på klikk.
  • Få tilgang til elementet etter ID og bruk "vist.bs.modal”. Dette vil vise modalen og utløse funksjonen. Funksjonen tildeler SRC for "Videopat" -variabelen til "