手軽で簡単、使いやすい国産の動画用モーダルウィンドウスクリプト・「modal-video.js」modal-video.jsは手軽で簡単に動画をモーダルウィンドウです。jQueryに依存しています。開発元は国産CMSを開発するa-blog cmsの方。スクリプトとCSSを読み込み、任意の要素に用意されたカスタムデータ属性にYoutubeやVimeoの動画IDのを与えるだけでモーダルウィンドウで動画を表示させる事が出来ます。手軽で簡単、ドキュメントも日本語なので使いやすい印象です。ライセンスはMITとの事。 modal-video.jsOn Github
Youtube,Vimeoなどの動画をレスポンシブにするためのJS「superembed.js」:phpspot開発日誌
GitHub - corbindavenport/superembed.js: Fluid width for YouTube, Vimeo, Vine, VideoPress, DailyMotion, and more embedded videos. Youtube,Vimeoなどの動画をレスポンシブにするためのJS「superembed.js」 ページ内に存在する動画タグを自動検出してレスポンシブにしてくれるJSです。 関連エントリ 360度のパノラマビデオを再生できる動画プレイヤー「Valiant360」 HTML5動画を背景にできるjQueryプラグイン「vidbg.js」 HTML5動画をフルスクリーンバックグラウンドに簡単設定できる「BIDEO.JS」
画像を並べて動画プレイヤーで動画っぽく表示できる「Jquery image player」:phpspot開発日誌
Jquery image player | UIPlayGround 画像を並べて動画プレイヤーで動画っぽく表示できる「Jquery image player」。 画像を並べるといえばスライドショー的なUIが一般的ですが、こちらは再生/停止ボタンとプログレスバーのみ、というより動画的なUIとアニメーションを加えて動画のような表示が可能です。 動画にするとファイルサイズの問題もありますが、あくまで画像ということで高品質で軽量の動画埋め込みが可能です。 テキストの埋め込みなども可能で、プレゼンテーション的な用途での利用もできそう 関連エントリ 動画パスを指定するだけで簡単に背景動画を設定できる「video-background-js」 動画をクールにモーダル化してハイライトできるjQueryプラグイン「Video Lightning」 Youtube,Vimeo,Dailymotion等の動画
[JS]これは便利！YouTubeの動画をはじめ、VineやTEDやCodePenやツイートやPDFやGoogleマップまで簡単にページに埋め込めるスクリプト -Embed.js
デモ：Googleマップ Googleマップもサポート。 Embed.jsの使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="path/to/jquery.embed.css"/> <script src="path/to/jquery.min.js"></script> <script src="path/to/jquery.embed.js"></script> </head> Twitterを埋め込む時には「widgets.js」、コードのシンタックスハイライトには「highlight.min.js」を使用します。 <head> ... <link rel="stylesheet" href="path/to/jquery.embed.
![[JS]これは便利！YouTubeの動画をはじめ、VineやTEDやCodePenやツイートやPDFやGoogleマップまで簡単にページに埋め込めるスクリプト -Embed.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/c7f1b78c4054290453044ec517a54e1f30348b63/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015041500.png)
[JS]YouTubeの動画をページ全体の背景に配置し、レスポンシブ対応の今時のテクニックを使ったチュートリアル
動画をページいっぱいの背景として使用するのは、ここ数年人気の高いテクニック。 その方法はいくつかありますが、今回はレスポンシブ対応、動画の上にコンテンツを配置しスクロールでカーテンのように引き上げるページを実装するチュートリアルを紹介します。 HTML5のvideo要素で自サーバーの動画を配置するのではなく、YouTubeの動画を使うので、サーバーのレスポンスを気にする必要もありません。 デモページ：下までスクロール 実装 使用するリソース チュートリアルにあたり、下記のリソースを使用しています。 jQuery jquery.mb.YTPlayer YouTubeの動画を背景として表示するjQueryのプラグイン フォント：Google Fonts (Raleway, Lato) アイコン：Font Awesome 背景に使う動画の注意点 背景に使う動画は、下記の点に注意してください。 動
![[JS]YouTubeの動画をページ全体の背景に配置し、レスポンシブ対応の今時のテクニックを使ったチュートリアル](https://cdn-ak-scissors.b.st-hatena.com/image/square/5b3413c8d26665727debe1c206713a14699cabe5/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015020310-01.png)
動画パスを指定するだけで簡単に背景動画を設定できる「video-background-js」:phpspot開発日誌
sethborden/video-background-js GitHub 動画パスを指定するだけで簡単に背景動画を設定できる「video-background-js」。 jQueryプラグインの形で、指定したエレメントの背景をビデオに出来ます。 関連エントリ HTML5ビデオの内容に併せて他コンテンツを連動させて切り替えられるフレームワーク「Popcorn.js」 ビデオのここが面白い！を共有できるライブラリ「HTML5 Video Voting」 JavaScriptから簡単に使えるFlashビデオプレイヤー「Flowplayer」
[JS]動画をブラウザいっぱいやエレメントの背景として配置できるスクリプト（スマホにも配慮） -Vide
.mp4, .webm など、動画をブラウザいっぱいやdivなどのエレメントの背景として配置できるjQueryのプラグインを紹介します。 デスクトップでは動画が再生され、スマホでは仕様のため代替の静止画像が表示されます。 デモページ iOSでは動画はネイティブのプレイヤーのみ再生可能なので、静止画像が表示されます。Androidでは一部の機種で動画が再生されてしまいますが、基本的には静止画像が表示されます。 Videの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部スクリプトとして記述します。 <body> ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/jquery.vide.min.js"></scr
FitVids.JS·動画をレスポンシブに対応させるライブラリ MOONGIFT
レスポンシブなWebデザインを考える時に若干面倒なのが動画の埋め込みです。YouTubeやVimeoでは動画を埋め込むためのiframeタグを配布していますが、これがwidth/height固定でレスポンシブでなかったりします。 解決策としてはスタイルシート指定もあるのですが、単純にwidth指定では横長で左右の黒い部分が多い動画になってしまいます。そこで使ってみたいのがFitVids.JSです。 埋め込み例。YouTube動画です。 幅を縮めた例。Vimeoも対応しています。 Kickstarterのウィジェットはうまくいかない模様。動画はうまくいきます。 使い方は簡単で、動画のクラス/IDを指定して実行するだけです。 <script src="path/to/jquery.min.js"></script> <script src="path/to/jquery.fitvids.js"
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
動画のように表現出来るコンテンツスライダー・「Jquery Image Player」