LogoMark.png

jQuery/Tubular のバックアップ(No.1)

Tubular

YouTubeの動画を背景に　DEMO


ここでは jQuery Tubularというプラグインを使って実現します。
この事例はローカルでは動作しません。サーバーにアップしてお試し下さい。

↑

準備

↑

HTML

要点のみ記載します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <script src="js/jquery-xxxxx.min.js"></script>
    <script src="js/jquery.tubular.xxxx.js"></script>
    <script src="js/sample.js"></script>
    <link rel="stylesheet" href="css/style.css">
    <title>Sample Page</title>
</head>
<body>
    <div id="container">
    　：
    以下省略


↑

CSS

要点のみ記載します。

*{
    margin:0; 
    padding:0;
}

#container {
    position: relative;
    width: 100%;
    height: 100%;
      ：
    background-color:  rgba(255,255,255,0.2);　
      /*　例）コンテナの背景は20%半透明　*/
}


↑

JavaScript

$(function(){
    $('document').ready(function() {
        var options = { videoId: '動画のID'};
        $('#container').tubular(options);
    });
});