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

2019-02-19 15:52
WEB

やりたいこと

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

サンプル

用意するもの

  • 埋め込みたいYouTube動画のID
    • 再生ページのURLのパラメータにある文字列を控える
 https://www.youtube.com/watch?v=【動画ID】

ソース

HTML

<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比率のままレスポンシブ対応させる
  • アスペクト比を変えたい場合は、 .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:ソース一部修正しました。

「瀬戸ツクリテの手仕事 in渋谷ヒカリエ」に行ってきた!

2018-10-29 23:09

2018年10月26日(金)〜28日(日)に渋谷ヒカリエで開催された「瀬戸ツクリテの手仕事 in渋谷ヒカリエ」に行ってきました。行くきっかけになった名古屋旅行とイベント当日の出来事をレポートします!

“セトモノ”のまち・瀬戸の職人さんのものづくり

器や皿など焼き物のことを、ふだん何気なく”セトモノ”と呼んでいると思います。

これ、もともとは瀬戸で作られた焼き物を指す「せともの(瀬戸物)」が、日本中に広く普及して焼き物の代表的存在になったという背景から、いつしか焼き物全般を”せともの”と呼ぶようになったんだそうです。

そんな陶器のまち、愛知県瀬戸市の職人さんの作品を展示・販売するイベントが「瀬戸ツクリテの手仕事 in渋谷ヒカリエ」です。

Read More

macOS Mojave をクリーンインストールする

2018-10-26 13:00
Mac

前回のあらすじ

  • macOS High Sierra から macOS Mojave にアップグレードする
  • OSアップグレード後は必ずクリーンインストールしているので、こちらも同じように記録しました。
    • 蓄積されたゴミファイルや設定を一掃してからセットアップしたほうが不具合が少ない(と思う)ので、いつもセットでやってます。
Read More

PhotoshopとIllustratorの各種設定ファイルのバックアップを取る

Adobe MAX 2018の発表で大型アプデが来ましたね。

バージョンが変わるので一応アクションなどバックアップを取っておこうと思ったのですが、毎回どこにあるか調べてるなあと思ったので、まとめておきます。

イラレはヘビーに使ってないのであっさり気味です。

Read More

三菱UFJ銀行の口座に大量の硬貨を入金する方法

2018-08-07 16:33

小銭の写真

こんにちは、夏の行楽シーズンを目前に残高がピンチになったサトウです。

  • 1年間貯めつづけた500円玉貯金がすごい量になった!
  • 財布に小銭があるのがイヤでよけてたら大量に貯まってしまった!

みたいな方に向けたTipsをお届けします。

三菱UFJ銀行で硬貨を入金する方法は3つ

単純に「硬貨を入金する」方法としては以下の3つがあります。

  1. ATMを利用する
  2. 窓口に持っていく
  3. ロビー入金機を使う

この中で、大量の硬貨をドバドバドバッとぶちこみたい方には3つめの「ロビー入金機」がおすすめです。

その理由とともに各方法をご説明します。

Read More

EWWW Image Optimizerを有効化するとエラーが出るときの対処法

症状

  • 管理画面 > プラグイン から「EWWW Image Optimizer」を有効化するとエラーがでる

EWWW Image Optimizerを有効化するとエラーが出る

  • ツールフォルダが作れない

EWWW Image Optimizer could not create the tool folder: /home/homepage/public_html/notes/wp-content/ewww/. Please adjust permissions or create the folder.

  • 使用するプログラムがインストールされていない

EWWW Image Optimizer uses jpegtran, optipng, pngout, pngquant, gifsicle, and cwebp. You are missing: jpegtran, optipng, gifsicle. Please install via the Settings Page or the Installation Instructions.

Read More