WordPress embed ショートコードで埋め込んだ YouTube 動画のレスポンシブ対応

WEB

やりたいこと

  • iframeタグの前後に任意のdivを挿入し、CSSでレスポンシブ対応させる
  • アスペクト比は16:9のみ対応とする
  • 動画の埋め込みには embed ショートコードを使用する
  • post_contentにあたる部分を置換するのではなく、embed機能のなにがしかにフックして書き換たい
  • 個別投稿かつYouTube動画の埋め込みにだけ効かせる

使用例

投稿本文での書き方

[embed]https://www.youtube.com/watch?v=wgp4pGbl_wU[/embed]

または

[embed]https://youtu.be/wgp4pGbl_wU[/embed]

※ショートコード変換走らないように大括弧を全角にしてます。

ソース

functions.php

参考:embed_oembed_html | Hook | WordPress Developer Resources

User Contributed Notes に寄せられていたソースを改変(そのままだと動作しなかったため)。

function wrap_oembed_html( $cached_html, $url, $attr, $post_id ) {
	if( strpos($cached_html,'youtube') !== false || strpos($cached_html,'youtu.be') !== false ){
		$cached_html = '<div class="embed-responsive">'.$cached_html.'</div>';
	}
	return $cached_html;
}
add_filter( 'embed_oembed_html', 'wrap_oembed_html', 99, 4 );

展開されるHTML

<div class="embed-responsive"><iframe title="ニガミ17才 MV「こいつらあいてる」(Nigami 17th birthday!! &quot;koitsura_ aiteru)" src="https://www.youtube.com/embed/wgp4pGbl_wU?feature=oembed" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" width="500" height="281" frameborder="0"></iframe></div>

CSS

参考:Components · Bootstrap

Bootstrap 3 にある Responsive embed のソースを抜き出した。

.embed-responsive{
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	overflow: hidden;
	padding-top: 56%;
}
.embed-responsive iframe{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	z-index: 0;
}

10年以上Macを使い続けたWeb屋のWindows10セットアップ記録

2006年に初めてiMacを買ってからずっとMacユーザーだったが、何をやってもモタつかない快適スペックを求めてWindowsを購入した。

一番長く使ったのはXP、Windows10は約3~4年前に10ヶ月だけ在籍した前職ぶり、という浦島状態から、なるべく快適な環境を目指して日々セットアップ中。

このエントリーはやったこと・これからやることの備忘録。

初期セットアップ

Microsoftアカウントのユーザーフォルダ名を変更

  • 初回起動時にかならずMicrosoftアカウントにログインさせられてしまう
    • macOSの場合はiCloudへのログインをスキップできるが、その選択肢がない
  • その際、ユーザーフォルダ名が自動的にMicrosoftアカウントのユーザーID(=メールアドレス)の最初の6文字にされてしまう
  • 任意のフォルダ名をつけるために、以下の手順を行う
    1. Microsoftアカウントをローカルアカウントに切り替え
    2. 新規ローカルアカウントの作成
      • かつ管理者権限を付与
    3. ローカルアカウントをMicrosoftアカウントに切り替え
    4. 元のアカウントを削除

参考:Windows10 – Microsoftアカウントのユーザーフォルダ名を変更 – PC設定のカルマ

Microsoft Store

MacでいうApp Storeにあたるもの。プリインストールアプリも多いので、不要なものは削除、必要なものは追加する。

プリインストールから削除

メモってなかった。次回。

プリインストールを継続利用

  • Spotify

追加でインストール

ブラウザから落とすもの

機能拡張

ブラウザ関連

セキュリティ

ストレージ

開発系

テキストエディタ
FTPソフト
  • FileZilla
    • https://filezilla-project.org/
    • 設定はMac版からもインポート可能
    • エクスポート(Mac):
      • ツールバー > ファイル > エクスポート を選択
      • 必要項目にチェック入れてOK
      • XMLファイルを保存
    • インポート(Win):
      • ツールバー > ファイル > インポート を選択
      • 保存したXMLファイルを開く
仮想環境

Adobe Creative Cloud

https://www.adobe.com/jp/creativecloud/catalog/desktop.html

アプリケーションのインストール
  • XD
  • Acrobat Pro
  • Photoshop
    • Camera Raw
  • Lightroom Classic
  • Illustrator
  • Premiere Pro
    • Media Encorder
  • Audition
Adobe Fontsのアクティベート
  • アクティブなフォント:クラウドマーク or 再読込マークがあったらクリックして再インストール
    • 全部まとめてDLはできない
    • フォント単位でなくウェイトごとにしかできない
  • 過去にアクティブ:必要なものがあればリアクティベート

参考:Creative Cloud アプリケーションでの Adobe Fonts の使用

ドライバー

画像系ツール

  • Monosnap
  • Fotor for Windows

コミュニケーションツール

フォント

Sublime Text 3 の設定(2/3) – Key Bindings [for Windows]

Sublime Text 3 の設定エントリー一覧

  1. Package Control
  2. Key Bindings
    • for Mac
    • for Windows(現在のエントリー)
  3. Settings

前置き

  • 長年Macユーザーだった自分が、Windowsでも近い感覚で操作できるようにすることを目的にしています
  • 人によってはデフォルトで十分な(わざわざ変更する必要がない)設定項目もあります
  • Windows ではUS配列キーを利用しています
  • Mac 版の設定エントリーは以下

設定画面の開き方

  • ツールバー>Preferences>Key Bindings
  • Package Control>「Prefereces: Key Bindings」を検索
Read More

Googleスプレッドシートで半角カタカナを全角カタカナに変換する関数「f7conv」をGASで作る

概要

  • Googleスプレッドシート上で「半角カタカナ」を「全角カタカナ」に変換したくなった。
  • 色々探したが、先人が作成したものは「ガ」などの濁音の変換時に「カ」と「濁点」に分割されてしまい、そのまま使用できなかった。
  • 以下のエントリーで公開されているソースを元に、半角カタカナ→全角カタカナ変換だけを行う関数に改造させていただいた。
Read More

1月度 関東オールドタイムジャム会、今週水曜(1月15日)開催です!

あけましておめでとうございます!バンジョー弾きのサトウです。
年末から年明けまでバタバタと過ごしていたら、もう成人式の日なんですね…はやい…。

ということで、1月度関東オールドタイムジャム会、今週水曜開催でございます!

今月のお題曲

今回は年始のおさらいということで、9月・11月に挙げたKey of Dの6曲をやりたいと思います。

2月に大阪・淀屋橋で開催されるオールドタイムイベント(また改めて告知します)でもジャムセッションでやるかもよー!とリストアップされていた曲目にも入っているスタンダード・ナンバーたちです。

関西遠征組は予習も兼ねて楽しくやりましょう〜!

Read More

年明けイッパツめ!1月15日(水)関東オールドタイムジャム会のお知らせ&前回のご報告

こんにちは。そろそろ本職(Web屋)の顔を忘れそうなバンジョー弾きのサトウです。

Photo by わたなべ (@wtnbear)

先月末、無事2回目の関東オールドタイム会を開催し、盛況のうちに閉幕となりました。お越しいただいたみなさん、ありがとうございました!

Read More

11月の関東オールドタイムジャム会は明日27日開催です!

こんにちは。バンジョー弾きのサトウです。

先週末は世田谷の等々力SALOON Western Clubで開催された「オールドタイムミニフェス」に2回目の出演をさせていただきました。お聞きいただいたみなさまありがとうございました!

The Time in My Hands の YouTube チャンネルに早速動画をUPしたので、よかったらご覧ください。

そしていよいよ明日は2ヶ月ぶり、2度目のオールドタイムジャム会の日!
この動画みて「あら何か楽しそうね〜」と思った方はぜひお気軽に遊びにきてください〜。

今月のお題曲

前回に引き続き、ジャムセッションで「これは必ず演奏するよ」というお題曲を決めました。
Facebookグループではすでに告知済みですが、こちらでもご紹介します。

前回はKey of Dを3曲でしたが、今回はDとAで2曲ずつピックアップしてみました!

John Hardy / Key of A

Old Joe Clark / Key of A

Liberty / Key of D

Fly around the Pretty Little Miss / Key of D


11月度 関東オールドタイムジャム会 開催概要

日時 11月27日(水) 19:30〜22:00
会場 洋食居酒屋『欧風屋』
料金 閲覧無料
※ジャム会参加者のみ¥1,000

※くわしくは前回のお知らせ記事をご覧ください。

それではみなさま、神田・欧風屋でお待ちしています!

11月27日(水) 関東オールドタイムジャム会やります!&前回のご報告

こんにちは。バンジョー弾きのサトウです。

先月このブログでも告知をしていた「関東オールドタイムジャム会」ですが、おかげさまで満員御礼で楽しい時間となりました。ご参加&ご来場いただいたみなさま、ありがとうございました!

前回の様子をほんのちょこっとですが動画でご紹介します。

次は来月、11月27日(水) に同じく神田・欧風屋さんにて開催します。

ぜひお仕事帰り・学校帰りにお立ち寄り下さい!

Read More