Menampilkan video youtube memang banyak caranya tapi disini kita akan mencobanya dengan menggunakan bootstrap terbaru, loh bilang terbaru memangnya di sebelumnya sudah ada, iya benar sudah ada tapi di bootstrap terbaru ini atau bootstrap 4 ini caranya di tambahkan lagi ya, jika sebelumnya ada 2 sekarang ada 4. Maka dari itu untuk cara menampilkan video youtube dengan bootstrap, apa saja perbedaanya simak terus ya teman-teman.
Menampilkan dengan kita menariknya langsung di youtube memang lebih mempermudah kita, dari pada kita membuatnya video sndri, apa lagi kita harus menyimpan dalam satu folder file video, sudah makan size yang besar apa lagi video, lebih hemat kita langsung memanggilnya dengan embed yang sudah tersedia. Tapi ada kekurangannya ya teman-teman kita jadi harus terkoneksi internet terlebih dahulu. Memang seperti itu ya jika kita ingin menggunakan bootstrap harus terhubung dengan internet, oke langsung saja untuk belajar cara menampilkan video youtube dengan bootstrap, seperti yang saya tulis di atas ada 4 apa saja :
<!-- 21:9 aspect ratio --> <div class="embed-responsive embed-responsive-21by9"> <iframe class="embed-responsive-item" src="..."></iframe> </div> <!-- 16:9 aspect ratio --> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="..."></iframe> </div> <!-- 4:3 aspect ratio --> <div class="embed-responsive embed-responsive-4by3"> <iframe class="embed-responsive-item" src="..."></iframe> </div> <!-- 1:1 aspect ratio --> <div class="embed-responsive embed-responsive-1by1"> <iframe class="embed-responsive-item" src="..."></iframe> </div>
Saya akan mencoba yang pertaman saja ya teman-teman, perhatikan struktur berikut ini:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>cara menampilkan video youtube dengan bootstrap</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>cara menampilkan video youtube dengan bootstrap</h1>
<div class="row">
<div class="col-md-6">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's <span class="d-block bg-warning"> standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</span> . It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="col-md-6">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy <span class="d-block bg-success"> text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/8QxxzB6TYpo"></iframe>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<-e-script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"><-e-/script>
<-e-script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"><-e-/script>
<-e-script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"><-e-/script>
</body>
</html>
Seperti biasa hilangkan tanda “-e-” ya teman-teman. dan bagaimana hasilnya:
Sudah tampil ya teman-teman, sangat mudah dan sangat bermanfaat sekali ya, saya rasa cukup sampai disini dulu belajar kita tentang cara menampilkan video youtube dengan bootstrap, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.
The post Cara Menampilkan Video youtube dengan Bootstrap appeared first on Kursus Website Terbaik.