Cara Membuat Background Video Menggunakan Iframe Youtube Part 1

Pada tutorial kali ini kita akan membahas tentang Cara Membuat Background Video Menggunakan Iframe Youtube, namun pada tutorial Cara Membuat Background Video Menggunakan Iframe Youtube Part 1 kita akan membuat design atau tampilan website sederhana yang akan kita gunakan.

Untuk mebuat tampilannya kita akan menggunakan getbootstrap v4, untuk stuktur tampilan yang akan kita buat yaitu seperti dibawah 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">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%0A.bg-form%7Bbackground%3A%20rgb(%20234%2C%20224%2C%20222%2C0.9)%3B%0A%20%20%20%20%20%20%20%20padding%3A%2030px%3B%0A%20%20%20%20%20%20%20%20margin-top%3A%2030px%3B%20%0A%20%20%20%20%20%20%20%20margin-bottom%3A%2020px%7D%0A.player%20%7Bpointer-events%3A%20none%3B%20padding%3A%200%20!important%3B%20margin-top%3A%20-40px%3B%7D%0A.nav%20%7B%20position%3A%20relative%3Btop%3A%200px%3B%20z-index%3A%209999%7D%0A%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
    <title>Hello, world!</title>
  </head>
  <body>

<div class="container-fluid bg-light nav">
    <div class="container">
      <nav class="navbar navbar-expand-lg navbar-light">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>
  </div>
</div>

  <div class="relative-contents">

    <div class="container-fluid form">
      <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4 bg-form align-middle">
            <form>        
              <div class="form-group row">
                <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Name</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
                </div>
              </div>
                <div class="form-group row">
                <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
                <div class="col-sm-10">
                  <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
                </div>
              </div>
                <div class="form-group row">
                <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Pswd</label>
                <div class="col-sm-10">
                  <input type="password" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
                </div>
              </div>
              <button class="btn btn-primary" type="submit">Submit form</button>
            </form>
        </div>
        <div class="col-md-4"></div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="card col-md-4" style="width: 18rem;">
        <img class="card-img-top" src="..." alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
       <div class="card col-md-4" style="width: 18rem;">
        <img class="card-img-top" src="..." alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
       <div class="card col-md-4" style="width: 18rem;">
        <img class="card-img-top" src="..." alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
  </div>

  </body>
</html>

Jika kita jalankan pada browser maka akan terlihat hasilnya seperti dibawah ini :

Pada tampilan diatas nantinya kita akan menambahkan sebuah background dengan menggunakan iframe yang terdapat pada youtube, untuk proses tersebut akan kita bahasas pada Cara Membuat Background Video Menggunakan Iframe Youtube Part 2.

Oke teman-teman itulah pembahasan kita pada tutorial Cara Membuat Background Video Menggunakan Iframe Youtube Part 1.

Semoga bermanfaat.

Terimakasih.