スクリプト無し、動画をページの背景いっぱいに表示する方法
jQueryなどスクリプトは一切使わずに、HTML5+CSSで動画をウェブページの背景いっぱいに表示する方法を紹介します。 フルサイズのデモ IE8などHTML5のvideo要素に対応していないブラウザでは、代替の背景画像が表示されます。 実装は、非常にシンプルです。 HTML 動画はbody内の一番下にvideo要素で配置し、その上には通常通りコンテンツを配置できます。 <body> ... コンテンツ ... <!-- 背景に設置する動画 --> <video autoplay loop poster="http://mattgrossdesign.com/raw-media/first-frame-screencap" id="video-background" muted> <source src="http://mattgrossdesign.com/raw-media/wood
CSSのみでフルスクリーンの動画背景を実装する方法 - NxWorld
ここ数年で見かけることも多くなった動画をフルスクリーンで背景表示するのをJavaScript等は使用せずにCSSのみで実装する方法です。 古いIEなども対象ブラウザとなる場合は使用できませんが、モダンブラウザであればCSSのみで簡単に実装できます。 実装にはHTMLとCSSをそれぞれ下記のように記述します。 <body> <video autoplay loop poster="img.jpg"> <source src="movie.mp4" type="video/mp4"> </video> </body> body { margin: 0; padding: 0; background: url(img.jpg) center center fixed no-repeat; } video { position: fixed; top: 0; left: 0; min-width:
画像を拡大全画面表示するのに、まだLightBoxとか言ってんの？ - それマグで！
フルスクリーン・モード使えよ。楽だぞ 昨今のブラウザにはフルスクリーンモードが搭載されていて、それを使うと、コピペレベルで画像を拡大表示が出来る 画像をフルスクリーンにお手軽に作るHTMLの例 <div id='img01' onclick="this.webkitRequestFullScreen();" > <img src='http://cdn-ak.f.st-hatena.com/images/fotolife/t/takuya_1st/20141129/20141129034938.jpg' /> </div> <button onclick="img01.webkitRequestFullScreen();">フルスクリーンで表示</button> #img01:-webkit-full-screen { width: 80%; background-color: rgba(
[JS]動画をブラウザいっぱいや指定サイズに背景として配置できる超軽量スクリプト -CoverVid
.mp4, .webm などの動画をブラウザいっぱいやセクションの背景として配置できるjQueryの超軽量（800bytes）プラグインを紹介します。 デモページ 単に要素内の背景として表示しているため、デモのようにスクロールエフェクトと組み合わせることも簡単です。 CoverVidの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> ... <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="covervid.min.js"></script> </body> Step 2: HTML 動画を背景として表示する親要素、もしくはラッパーを配置します。 <div class="
![[JS]動画をブラウザいっぱいや指定サイズに背景として配置できる超軽量スクリプト -CoverVid](https://cdn-ak-scissors.b.st-hatena.com/image/square/9110ae5aaacb7e18964553e948fdad1f627eb39c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014111003.png)
JavaScriptプログラミング講座【フルスクリーンについて】
// ------------------------------------------------------------ // フルスクリーン表示が可能か調べる関数 // ------------------------------------------------------------ function DocumentIsEnabledFullscreen(document_obj){ return ( document_obj.fullscreenEnabled || document_obj.webkitFullscreenEnabled || document_obj.mozFullScreenEnabled || document_obj.msFullscreenEnabled || false ); } // ----------------------------
レスポンシブなフルスクリーンでスクロールするページが作れる「brock scroll」:phpspot開発日誌
Block Scroll レスポンシブなフルスクリーンでスクロールするページが作れる「brock scroll」。 divでくくればスライドのようにページ送りができる流行りのあのUIを実現するためのjQueryプラグイン。 スマホでも動くみたいです 関連エントリ 画像をフルスクリーンに拡大できるギャラリー作成jQueryプラグイン「fullsizable」 動画をフルスクリーン背景にすることができるjQueryプラグイン「Vide」 フルスクリーンでかつスクロールする迫力あるギャラリー実装が可能になる「Intense Images」 入力の心理負荷が低そうなフルスクリーンフォーム実装デモ「Fullscreen Form Interface」
画像をフルスクリーンに拡大できるギャラリー作成jQueryプラグイン「fullsizable」:phpspot開発日誌
jQuery fullsizable by MSchmidt 画像をフルスクリーンに拡大できるギャラリー作成jQueryプラグイン「fullsizable」。 HTML5のフルスクリーンAPIなども使ってLightBoxの代替として大きい画像を楽しむサイトに使えそうなプラグインです。 関連エントリ Google画像検索風のイメージギャラリーが作れる「jQuery.GI.TheWall.js」 レスポンシブ対応でCSS3アニメーションを使った超クールギャラリー実装プラグイン「S Gallery」 レスポンシブでPinterest風レイアウトのギャラリーが作れるjQueryプラグイン「Galereya」 新Flickr風のギャラリーが作れるjQueryプラグイン「Justified Gallery」
Intense Images
Intense Image Viewer A javascript library for viewing images in a fully full screen. Click the images to see it in action!
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP