PopUp Video pada Bootstrap

Halo teman teman, semoga sehat sehat selalu, kali ini akan belajar membuat PopUp Video dengan Bootstrap. yuk kit apraktek kan yah teman teman.

Teman teman bisa buka text editor teman teman dan ketikan struktur HTML berikut dan beri nama dengan nama popUp.html jangan lupa di save yah teman teman.

<!DOCTYPE html>
<html>
	<head>
		<title> PopUp Video Bootstrap </title>
		<meta charset ="utf-8">
		<meta http-equiv ="X-UA-Compatible" content ="IE=edge,chrome=1">
	    <meta name ="description" content ="Demo project">
		<meta name ="viewport" content="width=device-width, initial-scale=1">
		<link rel ="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	</head>
	<body>
		<div class ="container">
			<div class ="row">
				<div class ="col-8 offset-4">
					<!-- Button trigger modal -->
					<button type ="button" class="btn btn-primary" data-toggle ="modal" data-target ="#exampleModal">
					  Klik Ini
					</button>

					<!-- Modal -->
					<div class ="modal fade" id ="exampleModal" tabindex ="-1" role ="dialog" aria-labelledby ="exampleModalLabel" aria-hidden="true">
					  <div class ="modal-dialog" role ="document">
					    <div class ="modal-content">
					      <div class ="modal-header">
					        <h5 class ="modal-title" id ="exampleModalLabel"> Do As Infinity </h5>
					        <button type ="button" class ="close" data-dismiss ="modal" aria-label="Close">
					          <span aria-hidden ="true">×</span>
					        </button>
					      </div>
					      <div class="modal-body">
					        <iframe width ="100%" height ="315" src ="https://www.youtube.com/embed/qIoDWTF0qSo" frameborder ="0" allow ="autoplay; encrypted-media" allowfullscreen></iframe>
					      </div>
					      <div class ="modal-footer">
					        <button type ="button" class ="btn btn-secondary" data-dismiss ="modal"> Close </button>
					        <button type ="button" class ="btn btn-primary"> Save changes </button>
					      </div>
					    </div>
					  </div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

sebelum penutup tag body ketikan kode javascript berikut.

<script src=”https://code.jquery.com/jquery-3.2.1.slim.min.js” integrity=”sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN” crossorigin=”anonymous”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js” integrity=”sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q” crossorigin=”anonymous”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js” integrity=”sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl” crossorigin=”anonymous”></script>

hasilnya bila teman teman klik pada button nya akan muncul PopUp Video yang di dalm nya video embed dari You tube,.

menarik bukan teman teman, silahkan di praktekan yah teman teman.

sekian tutorial PopUp Video pada Bootstrap semoga bermanfaat yah teman teman jangan lupa baca juga artikel artikel yang lain yah teman teman.