Cara Membuat Background Video Menggunakan Iframe Youtube Part 1

Di panduan kali ini kita akan membahas mengenai Cara Membangun Background Video Menggunakan Iframe Youtube, namun di panduan Cara Membangun Background Video Menggunakan Iframe Youtube Part 1 kita akan merancang design atau tampilan laman sederhana yang akan kita gunakan.



Bagi mebuat tampilannya kita akan menggunakan getbootstrap v4, bagi stuktur tampilan yang akan kita bikin 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=Di panduan kali ini kita akan membahas mengenai  Cara Membangun Background Video Menggunakan Iframe Youtube Part 1 title=Cara Membangun Background Video Menggunakan Iframe Youtube Part 1 />
    <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=Di panduan kali ini kita akan membahas mengenai  Cara Membangun Background Video Menggunakan Iframe Youtube Part 1>
        <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=Di panduan kali ini kita akan membahas mengenai  Cara Membangun Background Video Menggunakan Iframe Youtube Part 1>
        <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=Di panduan kali ini kita akan membahas mengenai  Cara Membangun Background Video Menggunakan Iframe Youtube Part 1>
        <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>


Bila kita jalankan di browser karenanya akan terlihat hasilnya seperti dibawah ini :





Di tampilan diatas nantinya kita akan menambahkan sebuah background dengan menggunakan iframe yang terdapat di youtube, bagi proses tersebut akan kita bahasas di Cara Membangun Background Video Menggunakan Iframe Youtube Part 2.



Oke teman-teman seperti itulah pembahasan kita di panduan Cara Membangun Background Video Menggunakan Iframe Youtube Part 1.



Semoga bermanfaat.



Terimakasih.




Cara Membuat Background Video Menggunakan Iframe Youtube Part 2







Sumber https://kursuswebsite.org

Popular posts from this blog

Perbedaan Antara Keyup dan Keydown Pada jQuery

Even di javascript adalah sebuah suatu yang terjadi di element tertentu, maksudnya yaitu suatu respon atau aksi yang di lakukan oleh user dimana kegiatan tersebut akan memicu jalannya script javascript yang terdapat di blog tersebut. Di javascript terdapat banyak event namun di pembahasan kali ini kita akan membahas mengenai Perbedaan Antara Keyup dan Keydown Di jQuery, Keyup adalah sebuah event yang akan di jalankan ketika tombol dilepaskan di di keyboard, dan sedangkan Keydown adalah sebuah event ketika tombol ditekan di keyboard.
Read more

Membuat Table Warna Berselang dengan PHP

Image
Selamat datang di blog Source Code Aplikasi, masih dengan File yang kemarin, tapi sekarang ini kita akan menggunakan Framework Bootstrap dan Membangun Table Warna Berselang dengan PHP, jadi jangan lupa yang kemarin praktekin dulu yah teman teman link nya yang ini . oka seketika saja kita praktekan.
Read more