jQueryタグのついた記事一覧

YouTubeのサムネイル画像をクリックしたら埋め込みiframeを読み込むjQuery

2019-02-19 15:52

WEB

やりたいこと

余計なデータ通信を発生させないために、YouTube動画のサムネイルをタップ・クリックしたときにだけ、埋め込み動画のiframeを読み込ませる。
16:9のレスポンシブ対応をする。
サムネイル画像と埋め込みiframeで表示位置がズレないようにする。

サンプル

https://hi3103.net/study/1902-loadytlater/

用意するもの

埋め込みたいYouTube動画のID
- 再生ページのURLのパラメータにある文字列を控える

 https://www.youtube.com/watch?v=【動画ID】

ソース

HTML

imgタグのソースに指定しているYouTubeサムネイル画像は、以下のエントリーを参考にURLを取得。
- YouTubeの動画のサムネイル取得が思った以上に簡単だった件 | EMiAC-Works

<div class="embed-responsive" id="hoge">
	<a href="#">
		<img src="http://i.ytimg.com/vi/【動画ID】/maxresdefault.jpg" alt="">
	</a>
</div>

クリック後は以下のようなソースになるようにする。

<div class="embed-responsive" id="hoge">
	<iframe src="https://www.youtube.com/embed/【動画ID】?autoplay=1&rel=0&controls=0"></iframe>
</div>

javascript

jQueryのライブラリ読み込み後に以下を記述。
- クリックされたaタグの親要素の中身をまるごと書き換えるという処理。

$(function(){
	$('#hoge a').on('click' , function(e){
		e.preventDefault();//リンクの停止
		$(this).parent().html('<iframe src="https://www.youtube.com/embed/【動画ID】?autoplay=1&rel=0&controls=0"></iframe>');
	});
});

埋め込みのオプションを指定する場合は、動画IDの後にパラメータを付与。
- クリックしたらで自動再生：autoplay=1
  - これは入れておくのがおすすめ。
  - 入れないと、サムネタップ→再生ボタンタップで2回閲覧者に行動させることになる。
  - 【追記】YouTubeの仕様上、スマホだと自動再生しない。追って調べます。
- 再生終了後に関連動画を表示しない：rel=0
- コントローラーを表示しない：controls=0
パラメータは、1つめは「?」で、2つめ以降は「&」でつなげる。

CSS

サムネイルと埋め込み動画を16:9比率のままレスポンシブ対応させる
- 参考：Embeds · Bootstrap
アスペクト比を変えたい場合は、 .embed-responsive の padding-top を変更する。
- 例：16:9の場合、100/16×9=56.25なので56%。4:3の場合、100/4×3=75なので75%、という考えかた。

.embed-responsive{
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	overflow: hidden;
	padding-top: 56%;
	margin-bottom: 1em;
}
.embed-responsive iframe,
.embed-responsive img{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

追記

2019-02-23：ソース一部修正しました。

2つのプルダウンから要素の絞込表示をするjQuery – boxfilter_double.js

2017-02-09 12:00

WEB

概要

incboxfilter_select.jsをさらに改造して、2つのプルダウンセレクターで要素の絞込表示をする。

成果物

https://hi3103.net/study/boxfilter_double/
https://hi3103.net/study/incboxfilter_double/
- incファイルの場合

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="js/boxfilter_double.js"></script>
	<title>boxfilter_double.js</title>
</head>
<body>

	<select name="filter_area" class="filters">
		<option value="area_all" selected="selected">Show All Area</option>
		<option value="area_1">Show Area_1</option>
		<option value="area_2">Show Area_2</option>
		<option value="area_3">Show Area_3</option>
		<option value="area_4">Show Area_4</option>
	</select>

	<select name="filter_genre" class="filters">
		<option value="genre_all" selected="selected">Show All Genre</option>
		<option value="genre_1">Show Genre_1</option>
		<option value="genre_2">Show Genre_2</option>
		<option value="genre_3">Show Genre_3</option>
	</select>

	<div class="boxes">
		<a class="area_1 genre_1 genre_2" href="#">Box1</a>
		<a class="area_2 genre_1 genre_3" href="#">Box2</a>
		<a class="area_3 genre_2 genre_3" href="#">Box3</a>
		<a class="area_4 genre_3" href="#">Box4</a>
		<a class="area_1 genre_1 genre_2 genre_3" href="#">Box5</a>
		<a class="area_2 genre_1 genre_2" href="#">Box6</a>
		<a class="area_3 genre_1 genre_3" href="#">Box7</a>
		<a class="area_4 genre_1 genre_2 genre_3" href="#">Box8</a>
		<a class="area_1 genre_1 genre_3" href="#">Box9</a>
		<a class="area_2 genre_1 genre_2 genre_3" href="#">Box10</a>
		<a class="area_3 genre_3" href="#">Box11</a>
		<a class="area_4 genre_1 genre_2 genre_3" href="#">Box12</a>
		<a class="area_1 genre_1 genre_2 genre_3" href="#">Box13</a>
		<a class="area_2 genre_1 genre_3" href="#">Box14</a>
		<a class="area_3 genre_1 genre_2" href="#">Box15</a>
		<a class="area_4 genre_1 genre_3" href="#">Box16</a>
		<a class="area_1 genre_3" href="#">Box17</a>
		<a class="area_2 genre_1 genre_2 genre_3" href="#">Box18</a>
		<a class="area_3 genre_1 genre_2 genre_3" href="#">Box19</a>
		<a class="area_4 genre_1 genre_2" href="#">Box20</a>
	</div>
</body>
</html>

boxfilter_double.js

$(document).ready(function(){

	var $boxes = $('.boxes a');

	$('select.filters').change(function () {
		$boxes.removeClass('match');

		$('select[name=filter_area] option:selected').each(function () {
			var $sa = $(this).attr('value');
			if($sa == 'area_all'){
				$boxes.addClass('match');
			}else if($boxes.hasClass($sa)){
				$boxes.filter('.'+$sa).addClass('match');
			}
		});
		$('select[name=filter_genre] option:selected').each(function () {
			var $sg = $(this).attr('value');
			if($sg != 'genre_all' && $boxes.hasClass('match')){
				$boxes.filter(':not(.'+$sg+')').removeClass('match');
			}
		});

		$boxes.fadeOut().promise().done(function() {
			$boxes.filter('.match').fadeIn();
		});
	});
});

style.CSS

@charset "UTF-8";

a {
	display: inline-block;
	text-decoration: none;
	text-align: center;
	margin-bottom: 1em;
	margin-right: 1em;
}

.boxes a {
	width: 10em;
	color:#CCC;
}

.area_1{ border: 2px solid gold; }
.area_2{ border: 2px solid lightblue; }
.area_3{ border: 2px solid lightgreen; }
.area_4{ border: 2px solid pink; }

.match{
	background-color: #000;
	color: #FFF;
}

参考URL

式と演算子 – JavaScript | MDN

incboxfilter_select.js

2017-02-08 12:00

WEB

概要

読み込んだincファイルの要素を絞込表示するjQuery – incboxfilter.jsをプルダウンセレクターにしたバージョン。

スタイルもシンプルにした。

成果物

http://hi3103.net/study/incboxfilter_select/

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="js/incboxfilter_select.js" charset="UTF-8"></script>
	<title>incboxfilter_select.js</title>
</head>
<body>

	<select name="filter">
		<option value="all" selected="selected">Show All</option>
		<option value="green">Show Green Boxes</option>
		<option value="blue">Show Blue Boxes</option>
		<option value="red">Show Red Boxes</option>
		<option value="hoge">Show Hoge Boxes</option>
	</select>

	<div class="boxes"></div>
</body>
</html>

incboxfilter_select.js

$(function(){
	$('.boxes').load('inc/box.inc', null, function() {
		var $filters = $('select[name=filter]');
		var $boxes = $('.boxes a');

		$filters.change(function () {
			$('select option:selected').each(function () {
				var $filterColor = $(this).attr('value');

				if ($filterColor == 'all') {
					$boxes.fadeOut().promise().done(function() {
						$boxes.fadeIn();
					});
				} else {
					$boxes.fadeOut().promise().done(function() {
						$boxes.filter('.'+$filterColor).fadeIn();
					});
				}
			});
		});
	});
});

box.inc

<a class="red" href="#">Box1</a>
<a class="green" href="#">Box2</a>
<a class="blue hoge" href="#">Box3</a>
<a class="green" href="#">Box4</a>
<a class="red" href="#">Box5</a>
<a class="green" href="#">Box6</a>
<a class="blue" href="#">Box7</a>
<a class="red hoge" href="#">Box8</a>
<a class="green" href="#">Box9</a>
<a class="blue" href="#">Box10</a>
<a class="red" href="#">Box11</a>
<a class="green hoge" href="#">Box12</a>
<a class="blue hoge" href="#">Box13</a>
<a class="green" href="#">Box14</a>
<a class="red" href="#">Box15</a>
<a class="blue" href="#">Box16</a>

style.css

@charset "UTF-8";

a {
	display: inline-block;
	text-decoration: none;
	text-align: center;
	margin-bottom: 1em;
	margin-right: 1em;
}

.boxes a {
	width: 10em;
	color:#FFF;
}

.green{
	background: lightgreen;
}
.blue{
	background: lightblue;
}
.red{
	background: lightcoral;
}
.hoge{
	border: 2px solid #000;
}

参考URL

change(fn) – jQuery 日本語リファレンス

読み込んだincファイルの要素を絞込表示するjQuery – incboxfilter.js

2017-01-31 0:00

WEB

概要

読み込んだincファイルの要素を付与されたクラス名を元に絞込表示する。

改造元

以下のエントリーを元に改造させていただきました。

CSS3とjQueryを使った要素の絞り込み（フィルタリング）アニメーションの実装サンプル

成果物

http://hi3103.net/study/incboxfilter/

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="js/incboxfilter.js" charset="UTF-8"></script>
	<title>incboxfilter.js</title>
</head>
<body>

	<div class="filter">
		<a class="all active" data-filter="all" href="#" role="button">Show All</a>
		<a class="green" data-filter="green" href="#" role="button">Show Green Boxes</a>
		<a class="blue" data-filter="blue" href="#" role="button">Show Blue Boxes</a>
		<a class="red" data-filter="red" href="#" role="button">Show Red Boxes</a>
		<a class="hoge" data-filter="hoge" href="#" role="button">Show Hoge Boxes</a>
	</div>

	<div class="boxes"></div>
</body>
</html>

box.inc

<a class="red" href="#">Box1</a>
<a class="green" href="#">Box2</a>
<a class="blue hoge" href="#">Box3</a>
<a class="green" href="#">Box4</a>
<a class="red" href="#">Box5</a>
<a class="green" href="#">Box6</a>
<a class="blue" href="#">Box7</a>
<a class="red hoge" href="#">Box8</a>
<a class="green" href="#">Box9</a>
<a class="blue" href="#">Box10</a>
<a class="red" href="#">Box11</a>
<a class="green hoge" href="#">Box12</a>
<a class="blue hoge" href="#">Box13</a>
<a class="green" href="#">Box14</a>
<a class="red" href="#">Box15</a>
<a class="blue" href="#">Box16</a>

incboxfilter.js

$(function(){
	$(".boxes").load("inc/box.inc", null, function() {
		var $filters = $('.filter [data-filter]');
		var $boxes = $('.boxes a');

		$filters.on('click', function(e) {
			e.preventDefault();
			var $this = $(this);

			$filters.removeClass('active');
			$this.addClass('active');

			var $filterColor = $this.attr('data-filter');

			if ($filterColor == 'all') {
				$boxes.fadeOut().promise().done(function() {
					$boxes.fadeIn();
				});
			} else {
				$boxes.fadeOut().promise().done(function() {
					$boxes.filter('.'+$filterColor).fadeIn();
				});
			}
		});
	});
});

style.css

@charset "UTF-8";

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html{
	font:18px/3 Arial,sans-serif;
	text-align: center;
}
a{
	text-decoration: none;
	display: block;
	color: #333;
}

/* filter */
.filter{
	margin: 2em 30%;
}
.filter a{
	display: block;
	position: relative;
	margin-bottom: 1em;
}
.filter a.active:before{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px 15px 0 0;
	border-color: #333 transparent transparent transparent;
}

/* boxes*/
.boxes{
	display: flex;
	flex-wrap: wrap;
}
.boxes a{
	width: 23%;
	margin: 0 1% 1em 1%;
}
.all{
	background: lightgray;
}
.green{
	background: lightgreen;
}
.blue{
	background: lightblue;
}
.red{
	background: lightcoral;
}
.hoge{
	border: 1px solid #333;
}

参考URL

JQueryでLoadで読み込んだ後のHTMLに対し、DOM操作ができずに困っています… – Yahoo!知恵袋