CSSタグのついた記事一覧

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;
}

Sublime Text 3 に SublimeLinter を導入してHTML5・CSS・JavaScriptのリアルタイム構文チェックをする

SublimeLinterとは

SublimeLinter

http://www.sublimelinter.com/

SublimeText上でコードの構文チェックをリアルタイムで行えるプラグイン

手順

  1. 「SublimeLinter」本体をインストール
  2. 言語ごとに必要なプラグインを別途インストール
Read More

SublimeTextにCSScombを導入する

CSScombとは

CSScomb is a coding style formatter for CSS.

You can easily write your own configuration to make your stylesheets beautiful and consistent.

GitHub – csscomb/sublime-csscomb: Sublime plugin for CSScomb—CSS coding style formatter

スタイルシートを指定した設定で一括整形できるパッケージ

事前準備

  • 動かすにはnode.jsが必要になるので、ダウンロードしてインストールする。
  • インストール完了時に以下の案内がでた。

This package has installed:

  • Node.js v8.12.0 to /usr/local/bin/node
  • npm v6.4.1 to /usr/local/bin/npm

Make sure that /usr/local/bin is in your $PATH.

整列時の設定を変更する

  1. Preferences > Package Settings > CSScomb > Settings – Default を開き、中身をコピー
  2. Preferences > Package Settings > CSScomb > Settings – User を開き、ペーストした内容を書き換えて保存

Sublime Text 3 に Emmet を導入する

Emmetとは

Emmet — the essential toolkit for web-developers

https://emmet.io/

HTMLとCSSの記述を効率化するテキストエディタ用のプラグイン

手順

  1. Package Controllから「Emmet」をインストール
  2. SublimeText自体のSetting – Userにほかの動作との衝突を回避する設定を記述
  3. EmmetのSetting – Userに展開時の設定を記述
Read More