【tubular】背景に動画を埋め込む

【タイトルが表示されるようになりました】

以下記事にも追記しましたが、youtube側の仕様が変わり、今現在タイトルが消せず、表示されてしまうみたいです。

背景にタイトル写ってるの恥ずかしいですよねー…

わざとはみ出して、トリミングするなり被せるなり、他の方法で映像をUPした方が良さげです。

悲しい。

（追記：2018年11月1日）

tatchan1000.hatenablog.com

前から動画をフルスクリーンで背景に埋めているサイトかっこいいなぁって思っていて、最近動画が使えるそんなデザインの仕事が回ってきて使った機能をメモしておきます。

とりあえず今回は背景にどーんと埋め込むタイプを。

簡単だったので実際紹介しておこうと思います。

youtubeを埋め込む

今回はyoutubeを埋め込む話だったので以下のjQueryを使用しました。

tubular

http://www.seanmccambridge.com/tubular/

右側のdownloadからダウンロードページに飛びます。

今度は左のナビから「Downloads」をクリック。

最新のデータをダウンロードします。

使用するのは「jquery.tubular.1.0.js」です。

解凍したら任意のところに入れます。

head部分

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="common/js/jquery.tubular.1.0.js"></script>
<script>
	$('document').ready(function() {
		var options = { videoId: 'ここに動画ID'};
		$('#mainV').tubular(options);
	});
</script>

まずはhead部分に以下のコードを記述していきます。

「videold」の部分には使用する動画のIDを記載します。

ちなみにtubularは限定公開でも大丈夫です。

web用に作ったのが大公開されないのでいいですね。

今回はファーストビュー部分だけだったので「mainV」に埋め込みます。

（全体に使用する場合はいらない…..のかな？試してみてください。）

body部分

<div id="mainV">
</div>

head部分で指定したidを作っておきます。

jquery.tubular.1.0.js

js側で色々と設定できます。

// defaults
    var defaults = {
        ratio: 16/9, // 4/3 or 16/9
        videoId: 'ここに動画ID', //headと同じ動画IDを
        mute: true,//デフォルトで音はミュート
        repeat: true,リピート再生について
        width: $(window).width(),//横幅は画面から
        wrapperZIndex: 99,//映像の奥行き…って何ですか？スミマセン笑
        playButtonClass: 'tubular-play',
        pauseButtonClass: 'tubular-pause',
        muteButtonClass: 'tubular-mute',
        volumeUpClass: 'tubular-volume-up',
        volumeDownClass: 'tubular-volume-down',
        increaseVolumeBy: 10,
        start: 0//再生開始時間を指定できます。トリミング！
    };

という感じで、音を出したり消したり、色々と設定できます。

特に指定もなければこのままupします。

サーバーにアップしなければ確認できないようなので気をつけてください。

私はBrackets使いなのでその辺問題なかったです。

高さとか指定

背景固定で再生するわけでなかったので少しコードを残しておきます。

３４行目あたり

// methods

    var tubular = function(node, options) { // should be called on the wrapper div
        var options = $.extend({}, defaults, options),
            $body = $('#mainV') // CSSでも高さ指定したりしてます。
            $node = $(node);

４１行目から

// build container
        var tubularContainer = '<div id="tubular-container" style="overflow: hidden; z-index: 1; width: 100vw; height: 100vh;"><div id="tubular-player" style="position: absolute"></div></div><div id="tubular-shield" style="width: 100vw; height: 100vh; z-index: 2; position: absolute; left: 0; top: 0;"></div>';

        // set up css prereq's, inject tubular container and set up wrapper defaults
        $('#mainV').css({'width': '100vw', 'height': '100vh'});
        $body.prepend(tubularContainer);
        $node.css({position: 'relative', 'z-index': options.wrapperZIndex});

こんな感じです。

高さと横幅を書いていきました。

#mainVの中身。

#mainV {
    position: absolute;
	width: 100vw;
    height: 100vh;
    overflow: hidden;
    margin: 0;
    padding: 0;
    z-index: 99999;
}

「z-index」めっちゃ9並べる人です。

この上に実際は文字あったり色々と大変でした。そっちのが大暴走してたかも。

この他にも「Magnific Popup」を同時に実装したのでそちらは別にまとめます。

Mofu

飛べないエビは美味しいエビフライ。