Cara Membuat Pop UP Video Menggunakan Bootstrap

Halo teman-teman pada tutorial kali ini saya akan membahas tentang Cara Membuat Pop UP Video Menggunakan Bootstrap, untuk membuat Membuat Pop UP Video Menggunakan Bootstrap langkah pertama silahkan teman-teman buka link http://getbootstrap.com/ jika sudah silahkan teman-teman klik menu Getting started yang terdapat pada bootstrap teman-teman bisa mendownload bootstrap nya terlebih dahulu, atau teman-teman biasa menggunakan CDN yang terdapat pada getbootstrap.

Nah pada tutorial ini saya telah men-download file bootstrap nya terlebih dahulu untuk mendapatkan file bootstrap nya teman-teman bisa langsung men-downloadnya pada http://getbootstrap.com/, jika file nya telah kita download berikutnya teman-teman bisa menyimpan script dibawah ini dengan nama index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Cara Membuat Pop UP Video Menggunakan Bootstrap</title>

    <!-- CSS-->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
 <iframe src="https://www.youtube.com/embed/eCthuzNClSs" frameborder="0" allowfullscreen></iframe>
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Cara Membuat Pop UP Video Menggunakan Bootstrap</h4>
      </div>
      <div class="modal-body">
          <div class="embed-responsive embed-responsive-16by9">
              <iframe src="https://www.youtube.com/embed/eCthuzNClSs" frameborder="0" allowfullscreen></iframe>
         </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

pada file index.html kita menggunakan video yang terdapat pada youtube dengan menggunakan tag <iframe src=”…”></iframe>, untuk meletakan videonya bisa teman-teman letakan pada bagian src=”” yang terdapat pada <iframe src=”…”>

berikutnya pada file index.html yang terdapat diatas kita menggunakan sebuah jQuery Modal yang terdapat pada getbootstrap sehingga ketika video kita klik maka akan tampil pop up dari video tersebut dan sehingga video tersebut dapat di jalankan. Dan jika kita jalankan pada browser maka akan muncul seperti dibawah ini

Bagai mana teman-teman cukup mudah bukan Cara Membuat Pop UP Video Menggunakan Bootstrap nya, sekian dulu tutorial saya kali ini tentang Cara Membuat Pop UP Video Menggunakan Bootstrap.

Semoga bermanfaat

Terimakasih

Cara Membuat Pop UP Video Menggunakan Bootstrap

Kategori