Takako Style

Takako Style

トップ > 記事一覧 > youtube動画のモーダル表示

youtube動画のモーダル表示

2023/10/16(月)
Youtubeにアップされた動画を、サイトに一覧表示するための設定を進めていました。サムネイル画像をクリック(タップ)すると動画を拡大表示させるものです。よく見かける形式でしょうか。
去年、同じ時期に同じ作業をしていたのですが、その時はどういうわけか帯に短し襷に長しという感じで、うまいこといかなかったのです。が、今度は思い通りにいってホッ。YoutubeのビデオID(URLの末尾11桁)を入力すると、サムネイル画像と動画を自動で取得してモーダル表示させるという一連の流れ?を意図した通りに実現できました。仕上がったページを眺めながらしばらく悦に入っておりましたよ(笑)世の中的に技術が進歩したのか、わたしが成長したのかわかりませんが。

メモを兼ねて、使用したスクリプトや参考にさせていただいたページなど載せておきます。

modal-video.js - jQuery Modal Video Plugin
Youtubeサムネイル画像の取得方法

明日は、instagramの埋め込み作業を予定していました。アプリを利用すると簡単なのですが、もっとスマートな方法が可能かもしれませんので、まずはトライしてみようかと(時間ばかりかかるのですが・・)可能なら表現の幅が広がりそうですし。

昨日はだいぶ冷えましたが、今日はあたたかな一日でした。とはいえもう秋ですね。朝晩は結構冷えます。どうぞあたたかくしてお過ごしくださいませ。ではでは、また~。

Comment Box is loading comments...