Cara Membuat Pop UP Video Menggunakan Bootstrap
Halo teman-teman di panduan kali ini saya akan membahas mengenai Cara Merancang Pop UP Video Menggunakan Bootstrap, bagi merancang Merancang Pop UP Video Menggunakan Bootstrap langkah pertama-tama silahkan teman-teman buka link http://getbootstrap.com/ jikalau telah silahkan teman-teman klik fitur Getting started yang terdapat di bootstrap teman-teman dapat mengunduh bootstrap nya terlebih dahulu, atau teman-teman biasanya menggunakan CDN yang terdapat di getbootstrap.
Nah di panduan ini saya telah men-download file bootstrap nya terlebih dahulu bagi memperoleh file bootstrap nya teman-teman dapat seketika men-downloadnya di http://getbootstrap.com/, jikalau file nya telah kita unduh berikutnya teman-teman dapat 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 Merancang 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 Merancang 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>
di file index.html kita menggunakan video yang terdapat di youtube dengan menggunakan tag <iframe src=”…”></iframe>, bagi meletakan videonya dapat teman-teman letakan di bagian src=”” yang terdapat di <iframe src=”…”>
berikutnya di file index.html yang terdapat diatas kita menggunakan sebuah jQuery Modal yang terdapat di getbootstrap sehingga ketika video kita klik karenanya akan tampil pop up dari video tersebut dan sehingga video tersebut dapat di jalankan. Dan jikalau kita jalankan di browser karenanya akan muncul seperti dibawah ini
Bagai mana teman-teman lumayan gampang bukan Cara Merancang Pop UP Video Menggunakan Bootstrap nya, sekianlah dulu panduan saya kali ini mengenai Cara Merancang Pop UP Video Menggunakan Bootstrap.
Semoga bermanfaat
Terimakasih
Sumber https://kursuswebsite.org
