Bootstrap 3 and Youtube in Modal

Question

I m trying to use the Modal feature from Bootstrap 3 to show my Youtube video  It works  but I can t click on any buttons in the Youtube video    Any help on this   Here s my code    lt div id  link  gt My video lt  div gt    lt div id  myModal  class  modal fade  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  gt       lt div class  modal-dialog  gt           lt div class  modal-content  gt               lt div class  modal-header  gt                   lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt    lt  button gt               lt  div gt               lt div class  modal-body  gt                   lt iframe width  400  height  300  frameborder  0  allowfullscreen    gt  lt  iframe gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt    lt script src    ajax googleapis com ajax libs jquery 1 10 1 jquery min js  gt  lt  script gt   lt script gt window jQuery    document write   lt script src  js jquery-1 10 1 min js  gt  lt   script gt    lt  script gt   lt script src  js bootstrap min js  gt  lt  script gt   lt script gt          link   click function              var src    http   www youtube com v FSi2fJALDyQ amp amp autoplay 1               myModal   modal  show                myModal iframe   attr  src   src                    myModal button   click function                  myModal iframe   removeAttr  src             lt  script gt

User · Answer

lt a href     class  btn btn-default  id  btnforvideo  data-toggle  modal  data-target   videoModal  gt VIDEO lt  a gt    lt div class  modal fade  id  videoModal  tabindex  -1  role  dialog  aria-labelledby  videoModal  aria-hidden  true  gt       lt div class  modal-dialog  gt           lt div class  modal-content  gt               lt div class  modal-body  gt                   lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt  amp times  lt  button gt                   lt div gt                       lt iframe width  100   height  315  src  https   www youtube com embed myvideocode  frameborder  0  allowfullscreen gt  lt  iframe gt                   lt  div gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt

User · Answer

MMhh    Could you post your entire HTML doc and what browser version your using   I recreated your page and tested in 3 browsers  Chrome  FF  IE8   I was able to stop and start the awesome WDS4 trailer without any issues  Here is my code    lt  DOCTYPE html gt   lt html gt     lt head gt       lt title gt Bootstrap 101 Template lt  title gt       lt meta name  viewport  content  width device-width  initial-scale 1 0  gt       lt  -- Bootstrap -- gt       lt link href  bootstrap min css  rel  stylesheet  media  screen  gt        lt  -- HTML5 shim and Respond js IE8 support of HTML5 elements and media queries -- gt       lt  -- if lt IE 9  gt         lt script src        assets js html5shiv js  gt  lt  script gt         lt script src        assets js respond min js  gt  lt  script gt       lt   endif -- gt     lt  head gt     lt body gt       lt div id  link  gt My video lt  div gt        lt div id  myModal  class  modal fade  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  gt           lt div class  modal-dialog  gt               lt div class  modal-content  gt                    lt div class  modal-header  gt                       lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt    lt  button gt                   lt  div gt                    lt div class  modal-body  gt                       lt iframe width  400  height  300  frameborder  0  allowfullscreen    gt  lt  iframe gt                   lt  div gt               lt  div gt           lt  div gt       lt  div gt        lt  -- jQuery  necessary for Bootstrap s JavaScript plugins  -- gt       lt script src  jq js  gt  lt  script gt       lt  -- Include all compiled plugins  below   or include individual files as needed -- gt       lt script src  bootstrap min js  gt  lt  script gt       lt script gt          link   click function              var src    http   www youtube com v FSi2fJALDyQ amp amp autoplay 1               myModal   modal  show                myModal iframe   attr  src   src                    myModal button   click function                  myModal iframe   removeAttr  src             lt  script gt     lt  body gt   lt  html gt    You could try bringing the Z-Index of your modal player higher in the stack       myModal iframe   css  z-index   999

User · Answer

I had this same issue - I had just added the font-awesome cdn links - commenting out the bootstrap one below solved my issue   didnt really troubleshoot it as the  font awesome still worked -    lt link href    netdna bootstrapcdn com twitter-bootstrap 2 3 2 css bootstrap-combined no-icons min css  rel  stylesheet  gt

User · Answer

If you don t want to edit the bootstrap CSS or all of the above doesn t help you at all  like in my case   there s an easy fix to get the video running in a modal on Firefox   You just need to remove the  fade  class from the modal and as it opens the  in  class  too       myModal   on  shown bs modal   function              myModal   removeClass  in

User · Answer

Found this in another thread  and it works great on desktop and mobile - which is something that didn t seem true with some of the other solutions  Add this script to the end of your page    lt  --Script stops video from playing when modal is closed-- gt   lt script gt          myModal   on  hidden bs modal   function  e                myModal iframe   attr  src       myModal iframe   attr  src              lt  script gt

User · Answer

user3084135 s answer worked well as a base for me  but I also needed to incorporate    The  video  tag for locally-hosted video as well as the  iframe  tag for externally-hosted video Ensure that the source was removed however the modal was dismissed The solution worked in a Bootstrap responsive design All videos auto-play on modal open Multiple modals are possible   My finished solution looks like this   MODAL TRIGGER BUTTON   lt a href     class  portfolio-link  data-toggle  modal  data-frame  iframe  data-target   portfolioModal1  data-theVideo  http   www youtube com embed xxxxxxxx  gt    The data-frame attribute can be either  iframe  or  video  to reflect the appropriate tag type  iframe for external vids  video for locally-hosted   BOOTSTRAP RESPONSIVE VIDEO CONTAINERS  iFrame    lt div align  center  class  embed-responsive embed-responsive-16by9  gt     lt iframe width  420  height  315  src    frameborder  0  allowfullscreen gt  lt  iframe gt   lt  div gt    video    lt div align  center  class  embed-responsive embed-responsive-16by9  gt       lt video width  640  height  364  controls gt           lt source src    type  video mp4  gt          Your browser does not support the video tag       lt  video gt                                  lt  div gt    These both reside within the standard Bootstrap responsive modal divs   JQUERY SCRIPT   lt script gt     document  ready function        function autoPlayModal          var trigger      body   find   data-toggle  modal            trigger click function             var theFrame     this  data   frame             var theModal     this  data   target             videoSRC     this  attr   data-theVideo              if  theFrame     iframe               videoSRCauto   videoSRC   autoplay 1              else             videoSRCauto   videoSRC                id  portfolioModal  video   attr  autoplay   true                        theModal      theFrame  attr  src   videoSRCauto                id  portfolioModal    on  hidden bs modal   function                      id  portfolioModal     theFrame  removeAttr  src                                  autoPlayModal         lt  script gt    Since autoplay works differently with iframe and video tags  a conditional is used to deal with each  To allow multiple modals  a wildcard selector is used to identify them  portfolioModal1-6 in my case

User · Answer

For Bootstrap 4  which handles videos  images and pages     http   jsfiddle net c4j5pzua    x000D   x000D     a data-modal    on  click  function    x000D   var  page     this  data  page    x000D   var  image     this  data  image    x000D   var  video     this  data  video    x000D   var  title     this  data  title    x000D   var  size     this  data  size    x000D       quickview  modal-title   text  title   x000D   if   size        quickview  modal-dialog   addClass  modal-   size     x000D   if   image    x000D        quickview  modal-body   html   lt div class  text-center  gt  lt img class  img-fluid  src     image    alt     title    gt  lt  div gt     x000D     else if   video    x000D        quickview  modal-body   html   lt div class  embed-responsive embed-responsive-16by9  gt  lt iframe class  embed-responsive-item  src  https   www youtube-nocookie com embed    video   autoplay 1  allowfullscreen gt  lt  iframe gt  lt  div gt     x000D     x000D   if   page    x000D        quickview  modal-body   load  page function    x000D         quickview   modal  show true    x000D        x000D     else   x000D        quickview   modal  show true    x000D     x000D       quickview   on  hidden bs modal   function    x000D        quickview  modal-title   text      x000D        quickview  modal-body   html      x000D    if   size        quickview  modal-dialog   removeClass  modal-   size     x000D       x000D      x000D   lt link rel  stylesheet  href  https   stackpath bootstrapcdn com bootstrap 4 3 1 css bootstrap min css  gt  x000D   x000D   lt script src  https   code jquery com jquery-2 2 4 min js  gt  lt  script gt  x000D   lt script src  https   stackpath bootstrapcdn com bootstrap 4 3 1 js bootstrap bundle min js  gt  lt  script gt  x000D   x000D   lt div class  container my-4  gt  x000D   x000D   lt h3 class  mb-4  gt Bootstrap 4 Modal YouTube Videos  Images  amp  Pages lt  h3 gt  x000D   x000D   lt a href  javascript    class  btn btn-primary  data-modal data-video  zpOULjyy-n8  data-title  Video Title  data-size  xl  gt Video lt  a gt  x000D   x000D   lt a href  javascript    class  btn btn-primary  data-modal data-image  https   v4-alpha getbootstrap com assets brand bootstrap-social-logo png  data-title  Image Title  data-size    gt Image lt  a gt  x000D   x000D   lt a href  javascript    class  btn btn-primary  data-modal data-page  https   getbootstrap com  data-title  Page Title  data-size  lg  gt Page   lt  a gt  x000D   x000D   lt p class  mt-4  gt   Clicking this will break it  but it ll work using a local page  lt  p gt  x000D   x000D   lt  div gt  x000D   x000D   lt div class  modal fade  id  quickview  tabindex  -1  role  dialog  aria-labelledby  quickview  aria-hidden  true  gt  x000D   lt div class  modal-dialog modal-dialog-scrollable modal-dialog-centered  role  document  gt  x000D   lt div class  modal-content  gt  x000D   lt div class  modal-header  gt  x000D   lt h5 class  modal-title  gt Title lt  h5 gt  x000D   lt button type  button  class  close  data-dismiss  modal  aria-label  Close  gt  lt span aria-hidden  true  gt  amp times  lt  span gt  lt  button gt  x000D   lt  div gt  x000D   lt div class  modal-body  gt  lt  div gt  x000D   lt  div gt  x000D   lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

For Bootstrap 5 here I share what worked for me Trigger button  lt button data-bs-toggle  quot modal quot  data-tagVideo  quot https   www youtube com embed zcX7OJ-L8XQ quot  data-bs-target  quot  videoModal quot  gt Video lt  button gt   Modal syntax  lt div class  quot modal fade quot  id  quot videoModal quot  data-bs-backdrop  quot static quot  data-bs-keyboard  quot false quot  tabindex  quot -1 quot  aria-labelledby  quot videoModalLabel quot  aria-hidden  quot true quot  gt     lt div class  quot modal-dialog quot  gt       lt div class  quot modal-content quot  gt         lt div class  quot modal-header quot  gt           lt button type  quot button quot  class  quot btn-close quot  data-bs-dismiss  quot modal quot  aria-label  quot Close quot  gt  lt  button gt         lt  div gt         lt div class  quot modal-body quot  gt           lt div class  quot ratio ratio-16x9 quot  gt             lt iframe src  quot  quot  allow  quot autoplay  quot  allowfullscreen gt  lt  iframe gt           lt  div gt         lt  div gt       lt  div gt     lt  div gt   lt  div gt   Function to get and autoplay Video from data function autoPlayYouTubeModal       var triggerOpen      quot body quot   find   data-tagVideo       triggerOpen click function         var theModal     this  data  quot bs-target quot          videoSRC     this  attr  quot data-tagVideo quot          videoSRCauto   videoSRC    quot  autoplay 1 quot         theModal     iframe   attr  src   videoSRCauto         theModal     button btn-close   click function             theModal     iframe   attr  src   videoSRC                    Call the function on document ready  lt script gt      document  ready function         autoPlayYouTubeModal           lt  script gt   And here the jsfiddle might have some Cors policy at first run  https   jsfiddle net alemens f19kct0v

User · Answer

Here is another solution  Force HTML5 youtube video  Just add  html5 1 to the source attribute on the iframe  like this    lt iframe src  http   www youtube com embed dP15zlyra3c html5 1  gt  lt  iframe gt

User · Answer

Try this For Bootstrap 4  lt  DOCTYPE html gt   lt html lang  quot en-US quot  gt   lt head gt       lt meta charset  quot UTF-8 quot  gt       lt meta name  quot viewport quot  content  quot width device-width  initial-scale 1 quot  gt       lt link rel  quot stylesheet quot  href  quot https   maxcdn bootstrapcdn com bootstrap 4 3 1 css bootstrap min css quot  gt       lt script src  quot https   ajax googleapis com ajax libs jquery 3 4 1 jquery min js quot  gt  lt  script gt       lt script src  quot https   cdnjs cloudflare com ajax libs popper js 1 14 7 umd popper min js quot  gt  lt  script gt       lt script src  quot https   maxcdn bootstrapcdn com bootstrap 4 3 1 js bootstrap min js quot  gt  lt  script gt   lt  head gt   lt body gt    lt div class  quot container-fluid quot  gt   lt h2 gt Embedding YouTube Videos lt  h2 gt   lt p gt Embedding YouTube videos in modals requires additional JavaScript jQuery  lt  p gt    lt  -- Buttons -- gt   lt div class  quot btn-group quot  gt       lt button type  quot button quot  class  quot btn btn-primary quot  data-toggle  quot modal quot  data-target  quot  videoModal quot  data-video  quot https   www youtube com embed lQAUq zs-XU quot  gt Launch Video 1 lt  button gt       lt button type  quot button quot  class  quot btn btn-primary quot  data-toggle  quot modal quot  data-target  quot  videoModal quot  data-video  quot https   www youtube com embed pvODsb -mls quot  gt Launch Video 2 lt  button gt       lt button type  quot button quot  class  quot btn btn-primary quot  data-toggle  quot modal quot  data-target  quot  videoModal quot  data-video  quot https   www youtube com embed 4m3dymGEN5E quot  gt Launch Video 3 lt  button gt       lt button type  quot button quot  class  quot btn btn-primary quot  data-toggle  quot modal quot  data-target  quot  videoModal quot  data-video  quot https   www youtube com embed uyw0VZsO3I0 quot  gt Launch Video 4 lt  button gt   lt  div gt    lt  -- Modal -- gt   lt div class  quot modal fade quot  id  quot videoModal quot  tabindex  quot -1 quot  role  quot dialog quot  gt       lt div class  quot modal-dialog modal-dialog-centered modal-lg quot  role  quot document quot  gt           lt div class  quot modal-content quot  gt               lt div class  quot modal-header bg-dark border-dark quot  gt                   lt button type  quot button quot  class  quot close text-white quot  data-dismiss  quot modal quot  gt  amp times  lt  button gt               lt  div gt               lt div class  quot modal-body bg-dark p-0 quot  gt                   lt div class  quot embed-responsive embed-responsive-16by9 quot  gt                     lt iframe class  quot embed-responsive-item quot  allowfullscreen gt  lt  iframe gt                   lt  div gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt    lt  div gt    lt script gt    document  ready function            Set iframe attributes when the show instance method is called        quot  videoModal quot   on  quot show bs modal quot   function event            let button     event relatedTarget      Button that triggered the modal         let url   button data  quot video quot            Extract url from data-video attribute           this  find  quot iframe quot   attr               src   url              allow    quot accelerometer  autoplay  encrypted-media  gyroscope  picture-in-picture quot                              Remove iframe attributes when the modal has finished being hidden from the user        quot  videoModal quot   on  quot hidden bs modal quot   function                quot  videoModal iframe quot   removeAttr  quot src allow quot                 lt  script gt    lt  body gt   lt  html gt   visit  link broken   https   parrot-tutorial com run code php snippet bs4 modal youtube

User · Answer

Ok  I found a solution                                                           lt div class  modal-header  gt                       lt button type  button  class  close  data-dismiss  modal  gt                           lt span aria-hidden  true  gt  amp times  lt  span gt  lt span class  sr-only  gt Close lt  span gt                       lt  button gt                       lt h3 class  modal-title  id  modal-login-label  gt Capital Get It lt  h3 gt                       lt p gt Log in  lt  p gt                   lt  div gt                    lt div class  modal-body  gt                        lt h4 gt Youtube stuff lt  h4 gt                   lt iframe src    www youtube com embed lAU0yCDKWb4  allowfullscreen    frameborder  0  height  315  width  100   gt  lt  iframe gt                       lt  div gt                     lt  div gt                lt  div gt           lt  div gt       lt  div gt

User · Answer

I put together this html jQuery dynamic YouTube video modal script that auto plays the YouTube video when the trigger  link  is clicked  the trigger also contains the link to play   The script will find the native bootstrap modal call and open the shared modal template with the data from the trigger   See Below and let me know what you think   I would love to hear thoughts     HTML MODAL TRIGGER     lt a href     class  btn btn-default  data-toggle  modal  data-target   videoModal  data-theVideo  http   www youtube com embed loFtozxZG0s   gt VIDEO lt  a gt    HTML MODAL VIDEO TEMPLATE    lt div class  modal fade  id  videoModal  tabindex  -1  role  dialog  aria-labelledby  videoModal  aria-hidden  true  gt     lt div class  modal-dialog  gt       lt div class  modal-content  gt         lt div class  modal-body  gt           lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt  amp times  lt  button gt           lt div gt             lt iframe width  100   height  350  src    gt  lt  iframe gt           lt  div gt         lt  div gt       lt  div gt     lt  div gt   lt  div gt    THE JQUERY FUNCTION     FUNCTION TO GET AND AUTO PLAY YOUTUBE VIDEO FROM DATATAG function autoPlayYouTubeModal      var trigger      body   find   data-toggle  modal        trigger click function         var theModal     this  data   target         videoSRC     this  attr   data-theVideo          videoSRCauto   videoSRC   autoplay 1          theModal   iframe   attr  src   videoSRCauto         theModal   button close   click function                theModal   iframe   attr  src   videoSRC                        THE FUNCTION CALL     document  ready function      autoPlayYouTubeModal          The FIDDLE  http   jsfiddle net jeremykenedy h8daS 1

User · Answer

x000D   x000D      videoLink   click function      x000D      var src    https   www youtube com embed VI04yNch1hU autoplay 1   x000D             introVideo   modal  show     lt -- remove this line x000D          introVideo iframe   attr  src   src   x000D      x000D   x000D      introVideo button close   on  hidden bs modal   function      x000D          introVideo iframe   removeAttr  src    x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 2 css bootstrap min css  rel  stylesheet  gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 4 js bootstrap min js  gt  lt  script gt  x000D   x000D   lt  -- triggering Link -- gt  x000D   lt a id  videoLink  href   0  class  video-hp  data-toggle  modal  data-target   introVideo  gt  lt img src  img someImage jpg  gt toggle video lt  a gt  x000D   x000D   lt  -- Intro video -- gt  x000D   lt div class  modal fade  id  introVideo  tabindex  -1  role  dialog  aria-labelledby  introductionVideo  aria-hidden  true  gt  x000D     lt div class  modal-dialog modal-lg  gt  x000D       lt div class  modal-content  gt  x000D         lt div class  modal-header  gt  x000D           lt button type  button  class  close  data-dismiss  modal  aria-label  Close  gt  lt span aria-hidden  true  gt  amp times  lt  span gt  lt  button gt  x000D         lt  div gt  x000D         lt div class  modal-body  gt  x000D           lt div class  embed-responsive embed-responsive-16by9  gt  x000D               lt iframe class  embed-responsive-item allowfullscreen  gt  lt  iframe gt  x000D           lt  div gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I have solved it on wordpress template    videoLink   http   www youtube com watch v yRuVYkA8i1o        lt  php     parse str  parse url   videoLink  PHP URL QUERY     my array of vars         youtube ID    my array of vars  v          gt    lt a class  video  data-toggle  modal  data-target   myModal  rel   lt  php echo  youtube ID   gt   gt       lt img src   lt  php bloginfo  template url     gt  assets img play png    gt   lt  a gt    lt div class  modal fade video-lightbox  id  myModal  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  gt           lt div class  modal-dialog  gt           lt div class  modal-content  gt               lt div class  modal-header  gt                   lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt  amp times  lt  button gt               lt  div gt               lt div class  modal-body  gt  lt  div gt           lt  div gt  lt  --   modal-content -- gt       lt  div gt  lt  --   modal-dialog -- gt   lt  div gt  lt  --   modal -- gt    lt script gt       jQuery document  ready function               var  midlayer       modal-body                     myModal   on  show bs modal   function  e                var  video      a video                var vid    video attr  rel                var iframe     lt iframe   gt                  var url      youtube com embed   vid   autoplay 1 amp autohide 1 amp modestbranding 1 amp rel 0 amp hd 1               var width f    100                var height f   400              var frameborder   0              jQuery iframe                    name   videoframe                   id   videoframe                   src  url                  width   width f                  height  height f                  frameborder  0                  class   youtube-player                   type   text html                   allowfullscreen  true                appendTo  midlayer                               myModal   on  hide bs modal   function  e                   div modal-body   html                            lt  script gt

User · Answer

using         introVideo   modal  show     conflicts with bootstrap proper triggering  When you click on the link that opens the Modal it will close right after completing the fade animation  Just remove the     introVideo   modal  show     using bootstrap v3 3 2   Here is my code    x000D   x000D   lt link href    maxcdn bootstrapcdn com bootstrap 3 3 2 css bootstrap min css  rel  stylesheet  gt  x000D   lt  -- triggering Link -- gt  x000D   lt a id  videoLink  href   0  class  video-hp  data-toggle  modal  data-target   introVideo  gt  lt img src  img someImage jpg  gt toggle video lt  a gt  x000D   x000D   x000D   lt  -- Intro video -- gt  x000D   lt div class  modal fade  id  introVideo  tabindex  -1  role  dialog  aria-labelledby  introductionVideo  aria-hidden  true  gt  x000D     lt div class  modal-dialog modal-lg  gt  x000D       lt div class  modal-content  gt  x000D         lt div class  modal-header  gt  x000D           lt button type  button  class  close  data-dismiss  modal  aria-label  Close  gt  lt span aria-hidden  true  gt  amp times  lt  span gt  lt  button gt  x000D         lt  div gt  x000D         lt div class  modal-body  gt  x000D           lt div class  embed-responsive embed-responsive-16by9  gt  x000D               lt iframe class  embed-responsive-item allowfullscreen  gt  lt  iframe gt  x000D           lt  div gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D   lt script src    maxcdn bootstrapcdn com bootstrap 3 3 4 js bootstrap min js  gt   lt  script gt  x000D   x000D   lt script gt  x000D      JS x000D   x000D      videoLink   click function      x000D      var src    https   www youtube com embed VI04yNch1hU autoplay 1   x000D             introVideo   modal  show     lt -- remove this line x000D          introVideo iframe   attr  src   src   x000D      x000D   x000D   x000D      introVideo button close   on  hidden bs modal   function      x000D          introVideo iframe   removeAttr  src    x000D     x000D   lt  script gt  x000D   x000D   x000D

User · Answer

Bootstrap does provide modal pop-up functionality out of the box    x000D   x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css    gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 3 2 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D   x000D   lt a class  btn btn-primary  data-toggle  modal  href   modal-video  gt  lt i class  fa fa-play  gt  lt  i gt  watch video lt  a gt  x000D   lt div class  modal fade  id  modal-video  style  display  none   gt  x000D     lt div class  modal-dialog  gt  x000D       lt div class  modal-content  gt  x000D         lt div class  modal-header  gt  x000D           lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt close  lt i class  fa fa-times  gt  lt  i gt  lt  button gt  x000D         lt  div gt  x000D         lt div class  modal-body  gt  x000D           lt iframe type  text html  width  640  height  360  src    www youtube com embed GShZUiyqEH0 rel 0 wmode transparent amp amp fs 1 amp amp rel 0 amp amp enablejsapi 1 amp amp version 3  frameborder  0  allowfullscreen    gt  lt  iframe gt  x000D           lt p gt Your video lt  p gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I have one tip for you   I would use       myModal   on  hidden bs modal   function              myModal iframe   removeAttr  src         instead of       myModal button   click function              myModal iframe   removeAttr  src          Because you can also close the modal without the button  so there for with this code it will remove the video every time the modal will hide

User · Answer

I found this problem  or the problem I found and described at https   github com twbs bootstrap issues 10489  related to CSS3 transformation  translation  on the  modal fade  modal-dialog class   In bootstrap css you will find the lines shown below    modal fade  modal-dialog     -webkit-transform  translate 0  -25          -ms-transform  translate 0  -25              transform  translate 0  -25      -webkit-transition  -webkit-transform 0 3s ease-out       -moz-transition  -moz-transform 0 3s ease-out         -o-transition  -o-transform 0 3s ease-out            transition  transform 0 3s ease-out      modal in  modal-dialog     -webkit-transform  translate 0  0         -ms-transform  translate 0  0             transform  translate 0  0       Replacing these lines with the following will show the movie correctly  in my case     modal fade  modal-dialog     -webkit-transition  -webkit-transform 0 3s ease-out       -moz-transition  -moz-transform 0 3s ease-out         -o-transition  -o-transform 0 3s ease-out            transition  transform 0 3s ease-out      modal in  modal-dialog

User · Answer

Using LATEST Bootstrap 4 5   Use the same modal repeatedly by passing different Youtube URL s from the HTML Page With a great Play button icon and Autoplay enabled Just COPY the code and you are all SET    View solution in Codepen   x000D   x000D         javascript using jQuery - can embed in the script tag     video-link   click function        var theModal     this  data  target      videoSRC     this  attr  data-video      videoSRCauto   videoSRC     modestbranding 1 amp rel 0 amp showinfo 0 amp html5 1 amp autoplay 1       theModal     iframe   attr  src   videoSRCauto       theModal     button close   click function            theModal     iframe   attr  src   videoSRC             x000D   video-section  modal-content     min-width  600px      video-section  modal-content iframe     width  560px    height  315px    x000D   lt  -- HTML with Bootstrap 4 5 and Fontawesome -- gt   lt html gt      lt head gt         lt link rel  stylesheet  href  https   use fontawesome com releases v5 13 1 css all css           integrity  sha384-xxzQGERXS00kBmZW 6qxqJPyxW3UR0BPsL4c8ILaIWXva5kFi7TxkIIaMiKtqV1Q  crossorigin  anonymous  gt         lt link rel  stylesheet  href  https   stackpath bootstrapcdn com bootstrap 4 5 0 css bootstrap min css  integrity  sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc NcPb1dKGj7Sk  crossorigin  anonymous  gt      lt  head gt       lt body gt         lt section id  video-section  class  py-5 text-center text-white  gt            lt div class  container h-100 d-flex justify-content-center  gt               lt div class  row align-self-center  gt                  lt div class  col  gt                     lt div class  card bg-dark border-0 mb-2 text-white  gt                        lt div class  card-body  gt                           lt a href     class  btn btn-primary bg-dark stretched-link video-link  data-video  https   www youtube com embed HnwsG9a5riA  data-toggle  modal  data-target   video-modal  gt                           lt i class  fas fa-play fa-3x  gt  lt  i gt                           lt  a gt                           lt h1 class  card-title  gt Play Video lt  h1 gt                        lt  div gt                     lt  div gt                  lt  div gt               lt  div gt            lt  div gt             lt  -- Video Modal -- gt            lt div class  modal fade  id  video-modal  tabindex  -1  role  dialog  gt               lt div class  modal-dialog h-100 d-flex align-items-center  gt                  lt div class  modal-content  gt                     lt div class  modal-body  gt                        lt button type  button  class  close  data-dismiss  modal  gt                        lt span gt  amp times  lt  span gt                        lt  button gt                        lt iframe frameborder  0  allow  accelerometer  autoplay  encrypted-media  gyroscope  picture-in-picture  allowfullscreen gt  lt  iframe gt                     lt  div gt                  lt  div gt               lt  div gt            lt  div gt         lt  section gt          lt script src  https   code jquery com jquery-3 5 1 slim min js  integrity  sha384-DfXdz2htPH0lsSSs5nCTpuj zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj  crossorigin  anonymous  gt  lt  script gt         lt script src  https   cdn jsdelivr net npm popper js 1 16 0 dist umd popper min js  integrity  sha384-Q6E9RHvbIyZFJoft 2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo  crossorigin  anonymous  gt  lt  script gt         lt script src  https   stackpath bootstrapcdn com bootstrap 4 5 0 js bootstrap min js  integrity  sha384-OgVRvuATP1z7JjHLkuOU7Xw704 h835Lr 6QL9UvYjZE3Ipu6Tp75j7Bh kR0JKI  crossorigin  anonymous  gt  lt  script gt       lt  body gt   lt  html gt  x000D   x000D   x000D        1   https   codepen io richierich25 pen yLOOYBL

[jquery] Bootstrap 3 and Youtube in Modal

Examples related to jquery

Examples related to css

Examples related to twitter-bootstrap

Examples related to youtube

Examples related to twitter-bootstrap-3