YouTubeタグのついた記事一覧

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

WEB

やりたいこと

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

YouTube Data API v3 を使って任意のプレイリストの動画情報をJSON形式で取得する jQuery + Ajax

WEB

概要

  • うちのサイトトップで出力しているYouTube動画埋め込みの出力に使っている仕組みの備忘録。
  • プレイリストの情報（入っている動画情報も含む）をJSON形式で取得するところまでをまとめた。
    • 応用としてチャンネル情報＆検索結果も取得して遊んでみた。
  • 実際にiframe等HTMLで出力するにはJSONをパースして組み立てる必要あり。
Read More

YouTubeチャンネルのRSSフィードをPHPでパースして出力する

WEB

概要

  • YouTubeチャンネルは、以下のようなURLでRSSフィードを吐いてる。

https://www.youtube.com/feeds/videos.xml?channel_id=【チャンネルID】

  • これをPHPのsimplexml_load_file関数で読み込み、パースして出力する。

サンプル

Read More

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

WEB

やりたいこと

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

サンプル

Read More