Video Background di Websitemu

back-vid

Oke guys kali ini saya akan berbagi tutorial bagaimana menambahkan background video kedalam website kita. Oke sudah tidak sabar ya, he..he.. oke mari kita simak tutorial berikut ini.

Kita akan menggunakan plugin jquery tubular, kalian bisa download di sini

Setelah berhasil kalian download letakkan di direktori kalian, satukan dengan file misalnya disini saya akan membuat file dengan nama video-html5.html , kalau sudah kita akan menuliskan source code seperti berikut ini:

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Background Video</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="jquery.tubular.1.0.1/js/jquery.tubular.1.0.js"></script>
    <script type="text/javascript">
        $().ready(function() {
            $('#wrapper').tubular({videoId: '6aZbJS6LZbs', mute: true, ratio: 4/3}); // where idOfYourVideo is the YouTube ID.
        });
    </script>
    <style>
        #wrapper{
            width: 960px;
            margin: 0 auto;
        }
        #wrapper h1{
            color: #ffff00;
        }

        #wrapper p{
            color: #FF0000;
        }
    </style>
</head>
<body>

    <div id="wrapper">
        <h5>Video Control</h5>
        <p id="video-controls" class="black-65">Video controls:<br /><a href="#" class="tubular-play">Play</a> | <a href="#" class="tubular-pause">Pause</a> | <a href="#" class="tubular-volume-up">Volume Up</a> | <a href="#" class="tubular-volume-down">Volume Down</a> | <a href="#" class="tubular-mute">Mute</a></p>
        <h1>Background Videoku</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's 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. 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><!-- end of wrapper -->

</body>
</html>

Yang perlu kita perhatikan dari source-code diatas adalah id video kita, teman-teman bisa mengambil video dari youtube dan kita akan ambil id video tersebut.

 

.tubular({videoId: '6aZbJS6LZbs', mute: true, ratio: 4/3});

Nah untuk lebih jelasnya, kalian bisa melihat demonya disini