hi3103の備忘録

やりたいこと

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

Read More

概要

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

Read More

概要

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

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

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

サンプル

• https://hi3103.net/study/1905-ytrss/
  • 今回は動画IDとタイトルを取得し、リスト形式のリンクを出力してみた。

Read More

やりたいこと

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

サンプル

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

Read More