Cara Membuat Popup Video dengan Bootstrap

Hallo sahabat Dumet, bagaimana kabarnya baik-baik serta sehat selalu yaa tentu jangan lupa selalu semangat. Oke pada kesempatan kali ini saya akan membuat tentang Popup Video pada Bootstrap, nanti saya akan menggunakan sebuah modal yang terdapat pada Bootstrap ,jadi modal ini adalah sebuah class yang ada pada bootstrap biasa sahabat sering temuin pada sebuah website saat ada pesan atau peringatan yang tiba-tiba muncul nah kurang lebih seperti itu bentuknya. Supaya lebih penasaran sekarang mulai kita buat saja mari ikutin step by step yaa:Langkah Pertama coba ketikan struktur HTML ya dan simpan file menjadi index.html seperti dibawah ini:

<!DOCTYPE html>
<html>
<head>
	<title>Membuat Popup Video</title>
	<link rel="stylesheet" type="text/css" href="css/custome.css">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
</head>
<body>
		<div class="container text-center">
			<h4>Membuat Popup Video pada Bootstrap</h4>
			<div class="row">
				<div class="col-md-4"></div>
				<div class="col-md-4 thumbnail" aria-hidden="true">Contoh Video
					<i class="far fa-play-circle" data-toggle="modal" data-target="#video1"></i>
					<img src="imvio/pic-vid1.png" class="img-fluid img-thumbnail">					
				</div>
				<div class="col-md-4"></div>
			</div>
		</div>

		<div class="modal fade" id="video1">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-body">
		        <video width="100%" controls autoplay loop>
		        	<source src="imvio/vid1.mp4" type="video/mp4">
		        </video>
		      </div>
		    </div>
		  </div>
		</div>


<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Script diatas saya menyiapkan contoh 1 file gambar dan 1 video terlebih dahulu ,jika sahabat ingin membuat lebih banyak tinggal disesuaikan saja sesuai kebutuhan. dan juga jangan lupa perhatikan gambar diberikut ini

Langkah yang kedua kita siapkan file style css seperti berikut ini:

h1{
	margin-bottom: 50px !important;
}
.thumbnail img {
    background-color: #3eff02;
    border: 5px solid #102cff;
   }

.thumbnail i{
	font-size: 40px;
	color: #ff0303;
	position: absolute;
	top: 45%;
	left: 43%;
	cursor: pointer;
	transition: 0.2s;
	opacity: 0;
}

.thumbnail:hover i{
	opacity: 1;
}

.modal-content{
	background: transparent !important; 
	border: none !important;
}

JIka sudah diketikan coba jalankan pada browser masing-masing maka hasilnya seperti tampilan dibawah ini :

Â Â Â

Demikian pembahasan artikel pada kesempatan kali tentang cara membuat popup video dengan menggunakan bootstrap, semoga bermanfaat dan sampai jumpa pada pembahasan artikel lainnya.

selamat mencoba.

Cara Membuat Popup Video dengan Bootstrap

Kategori