Youtubeの動画をlity.jsによって表示したあと関連動画を非表示にする

YOUTUBEに上がっている動画を共有で貼り付けることができます。

関連動画がうざいときは上記のチェック項目を入れると非表示にできます。

普通に動画を張るときはいいのですが、jqueryのlityを使用してモーダルウィンドウで表示させたいって時もあります。

Jquery lity

http://sorgalla.com/lity/

制作者はJan SorgallaさんでLicensed MITで提供されています。

簡単に実装でき便利なんですが、ひとつつまずいたところで、lityに関連動画非表示のパラメータ「?rel=0」をつけても関連動画が表示されてしまうのです。

そこで若干、パラメータを足させていただきました。

'https://www.youtube' + (matches[2] || '') + '.com/embed/' + matches[4],
$.extend({
rel:0,autoplay:1
},

上記の箇所のautoplay:1の前にrel:0,を追加しました。

サンプルはこちら

autoplayやrelを追加できるのでloopも追加できると思います。

Hello Dollyの有効活用

hellodolly

hello-dolly

ワードプレスをインストールすると最初からインストールされている有名なプラグイン「Hello Dolly」。

 

これはただのプラグインではありません。Louis Armstrong によって歌われた最も有名な二つの単語、Hello, Dolly に要約された同一世代のすべての人々の希望と情熱を象徴するものです。このプラグインを有効にすると、すべての管理画面の右上に Hello, Dolly からの歌詞がランダムに表示されます。

 

ということで、素敵なプラグインです。

だいたい消されてしまうのですが、ランダム表示プログラムに使えるのでは?と改良してみました。

 

作者のMatt Mullenwegさんリスペクトをこめて。

 

<?php
function hello_dolly_get_lyric() {
	$lyrics ="Hello, Dolly
(*´ω`*)
( ˘ω˘ )スヤァ
(*^◯^*)";
	$lyrics = explode("\n", $lyrics );
	return wptexturize( $lyrics[ mt_rand( 0, count( $lyrics ) - 1 ) ] );
}
	$chosen = hello_dolly_get_lyric();
	echo"<p id='dolly'>$chosen</p>";
?>

サンプル
https://promenade.in/run-wordpress-hello-dolly/

.hasClass,.addClass(),.removeClassで用途色々スイッチ

トグルではなく、jqueryでclassを加えたり、外したり。
見た目はCSSでやるため用途はいろいろあります。

初歩的ですがシンプルにしました。(自分用に)

Jquery

$(function() {
$('.btn').click(function(){
if($('#area').hasClass('bold')){
	$('#area').removeClass('bold');
} else {
	$('#area').addClass('bold');
}
});
});

CSS


.bold span{
	background: -webkit-linear-gradient(transparent 60%, #ff1493 60%)!important;
	background: -o-linear-gradient(transparent 60%, #ff1493 60%)!important;
	background: linear-gradient(transparent 60%, #ff1493 60%)!important;
	font-weight:bold;
}

HTML

<button class="btn">PUSH</button>
<section id="area">jqueryの<span>addClass(),removeClass(),hasClass()</span>を使用した切替スイッチ。見た目はCSSで制御するため用途は色々。</section>

サンプル

http://promenade.in/run/adclass.html