Masalah Embed Youtube pada Bootstrap 3 Modal

Masalah ini muncul pas saya menggunakan fitur Modal dari Bootstrap 3 untuk menampilkan video dari Youtube. Ketika modal dipanggil, video youtube hanya menampilkan kotak hitam kosong, bahkan kadang blank.

Setelah saya cari2, berdasarkan sumber ini, ternyata masalah ada pada CSS3 transformation (translation) yang digunakan untuk css Bootsrap Modal. Solusinya adalah dengan mengedit file css bootstrap.css.

Cari bagian ini :


.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);
}
Dan gantikan dengan yang berikut ini :

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

}

Itu aja deh kayak e, semoga bermanfaat :D

Comments :

0 comments to “Masalah Embed Youtube pada Bootstrap 3 Modal”

Posting Komentar