Pop up Video pada Bootstrap

Sebagai framework yang cukup populer, Bootstrap memberikan fungsi terbaiknya untuk membantu kalian sebagai developer untuk merancang website dengan cepat dan mudah. Bagi kalian yang tidak memiliki ketertarikan pada desain website, tenang saja karena bootstrap hadir untuk kalian. Telah dipersiapkan berbagai macam class CSS yang dapat kalian pergunakan dalam membangun tampilan website yang menarik. Salah satu contohnya yang ada pada Bootstrap adalah Pop up. Ya, kita akan belajar bagaimana cara membuat pop up video pada Bootstrap.

Pop up pada Bootstrap ini sering dikenal dengan istilah modal. Modal pada Bootstrap adalah suatu fungsi dimana saat kita menekan sesuatu yang telah diset, maka akan memunculkan pop up dari layar browser kalian. Dengan begitu akan memudahkan kalian apabila mendapati kasus seperti itu. Selain mudah, popup ini juga dapat membantu memberikan ruang lebih saat digunakan, karena sebagian tampilan tersebut kita sembunyikan dan hanya muncul saat kita melakukan aksi tertentu.

Oke langsung saja kita mulai praktekknya dengan menggunakan video dari youtube sebagai konten dari si popup. Untuk detailnya kalian bisa salin contoh code berikut ini.

popup.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title> Pop Up Video dengan Modal pada Bootstrap </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2> Contoh Modal </h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal"> Lihat Video </button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Judul Pop Up</h4>
        </div>
        <div class="modal-body">
          <iframe width="560" height="315" src="https://www.youtube.com/embed/IXdNnw99-Ic" frameborder="0" allowfullscreen></iframe>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal"> Tutup </button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

Setelah sudah kalian simpan dan lihat hasilnya pada browser kalian. Jika berhasil maka tampilanya akan seperti ini.

pop-up-video-pada-bootstrap-rangga1-271017

Tampilan diatas adalah tampilan awalnya, kalian bisa klik tombol tersebut dan lihat apa yang terjadi.

pop-up-video-pada-bootstrap-rangga2-271017

Popup dari bootstrap akan memunculkan video yang telah kita atur sebelumnya. Mudah bukan ?

Sekian pembahasan mengenai bagaimana cara membuat pop up video pada bootstrap. Semoga bermanfaat.

 

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published. Required fields are marked *