LogoMark.png

jQuery/Tubular

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);
    });
});

PAGES

GUIDE

TOOL

DATA

Last-modified: 2020-02-02 (日) 18:07:10