YouTube動画コンテンツの埋め込みをしよう【実践編・YouTubeAPIを使ってプラグインを作ってみた】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのぺちこです。 さて、前回「YouTube動画コンテンツの埋め込みをしよう【紹介編・オリジナルUIと導入サイトまとめ】」という記事を書き、末尾で「次回は実践です！」と予告してしまったので…勉強してきました！ 以前に「サイトでおしゃれに動画再生！オリジナルUIの全画面動画を実装！」という記事を書いたのですが、基本的にはこれと同じことをYouTubeAPIでやってしまおう、というのが今回の趣旨になります。それでは早速いってみましょう。 DEMO 今回は、以下の項目にあてはまるような方にお使いいただけるサンプルを準備しました。サクッと実装しないといけないデザイナーさんに向けて作ったものです！ しかし、私も所詮しがないデザイナー…。JavaScriptに堪能な方は、多分自分で書いたほうがスマートだと思います…。すみません、すみません…。 こちらは以下のような人におすすめです。
oEmbed APIの使い方まとめ！URLから埋め込みHTMLタグを作ろう！
oEmbedとは、埋め込み用コードを取得するためのシステム、統一規格です。TwitterやYoutube、Vimeoなどといった世界的に有名なwebサービスの各々がこのoEmbedの規格を採用しています。 統一規格ってどういうこと？統一規格があることで、web開発者はoEmbedの仕様だけを知っておけば、「個別に各サービスの仕様を調べる」といった学習コストをかけることなく、様々なサービスの埋め込み用コンテンツを利用することができるわけです。 2014年9月には日本で人気のブログサービスはてなブログが、このoEmbedの規格を採用して、ブログ記事の埋め込み用コードを取得するAPIを公開しました。採用するサービスが増えれば増えるほど、web開発者にとって好ましい環境が整っていくというわけですね。
Youtube動画はカッコよく埋め込もう「PrettyEmbed.js」:phpspot開発日誌
PrettyEmbed.js Demo - CodePen Youtube動画はカッコよく埋め込もう「PrettyEmbed.js」。 通常埋め込むと動画コントローラーやラベルが表示されて便利なんですが、どうしてもYoutube埋め込んだ感が凄くなりますね。 そこで、PrettyEmbedを使えば次のように。せっかくデザインしたサイトもYoutube埋め込みでかっこわるくならないようにできますね 関連エントリ Youtube,Vimeo,Dailymotion等の動画APIを共通化できる「jquery-video」 流行りのYoutube風ローディングバー実装jQueryプラグイン YoutubeのChannel・Playlistの動画リストを表示できるjQueryプラグイン「PlumTube」
サイトに外部ブログのRSSを表示する方法と、記事タイトルが長すぎる場合に省略表示する方法メモ。
今更ですが、Google Feed APIを利用してRSSを取得・表示する方法と、そのタイトルをCSSで省略表示させる方法を学びましたのでメモメモ。 みんなだいすきGoogle Feed API サイト制作の際、トップページなどに外部ブログのRSSを表示させたいときってありますよね。 私は過去にバンドの公式サイトを制作していた時、メンバーのブログRSSを表示させてくれとよく頼まれたものです。 （その時は無料RSSサービスを使っていました・・・） そんなときに役立つのがGoogle先生による『Google Feed API』。 表示件数や表示させたい内容、それを囲むタグなどわりと自由にカスタマイズできるので多くのWEB屋さんに愛されているようです。 何かいい方法はないか呟いたところ、多くの方からこちらを薦めていただきましたヾ(*´∀｀*)ﾉ ちなみに、以前はAPIキーを取得する必要があったよ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WebアプリにSNSアカウントでのログインを実装する
Googleマップ有料化でYahoo! APIを使ってみた (1/5)
