CSSのaspect-ratioプロパティがすべてのブラウザにサポートされました、画像をアスペクト比で実装する今までとこれからの実装方法
先日アップデートされたSafari 15とSamsung Internet 15により、すべてのエバーグリーンブラウザでaspect-ratioプロパティがサポートされました。 ※エバーグリーンとは、最新版に自動アップデートされるブラウザのことです。 aspect-ratioプロパティを使用することで、レスポンシブ対応の画像をアスペクト比を維持したまま簡単に実装できます。 CSSでアスペクト比を実装する今までとこれからの実装方法を紹介します。 CSS ways to Create Fixed Aspect Ratio aspect-ratioプロパティとは 1. Padding Hack 2. Viewport width solution 3. aspect-ratioプロパティ デモ aspect-ratioプロパティとは aspect-ratioプロパティは名前の通り、アスペクト比を
YouTube 動画埋め込みのレスポンシブ対応方法 - by Takumi Hirashima
YouTube 動画の埋め込みをレスポンシブ対応する方法を紹介します。 埋め込みコードをブロック要素で囲み、CSS の aspect-ratio プロパティを使い、アスペクト比を 16:9 に固定することで対応します。縦型動画の場合はアスペクト比を任意の値に変更してください。 また、古いブラウザーでも対応できる padding-top ハックを使った方法も紹介します。 動画の埋め込みをレスポンシブ対応する方法 aspect-ratio を使った方法 padding-top ハックを使った方法 動画の埋め込みをレスポンシブ対応する方法 まずは YouTube からコピーした「動画の埋め込みのコード（iframe）」をブロック要素（<div class="youtube">〜</div>）で囲みます。 <div class="youtube"> <iframe width="560" heig
日本語化もされている、クロスプラットフォームに対応したオープンソースの動画編集ソフト・「OpenShot Video Editor」
OpenShot Video Editorはクロスプラットフォーム対応の、OSSな動画編集デスクトップアプリです。機能も豊富でUIも割とわかりやすい印象でした。これでOSSとは恐れ入ります。 主な機能は、トリミングやスライス、アニメーションエフェクト、制限無しのレイヤー、動画エフェクト（背景を消したり明るさを調整したり等）、スローモーションやタイムエフェクトなどなど。 使ってみた DLして動作テストしてみました。既に日本語化（100%ではないです。翻訳の進捗状況はこちら）されています。まったく学習も無く、この手のソフトを使ったことがあまりない当方でも少し操作しただけである程度操作法は理解できました。とっつきやすい印象ではあります。 動画編集ツールはYoutuberやゲーム実況など、動画配信者の増加に伴い大きく需要を高めていると思います。既に有能な先発ソフトはあるものの、高額で手が出せない方
livedl - ニコ生/ツイキャス/YouTube Liveに対応したライブストリーミングダウンローダー MOONGIFT
ライブ配信用サービスが増えていますが、その結果として自分が見たいものが全部は見られないという状態になっています。そこで需要が出るのが録画ツールです。オフライン視聴できれば良いですが、そもそもサポートされていなかったり、配信側で制限してしまうこともあるでしょう。 livedlはそんな悩める方にぴったりなソフトウェアです。ライブ配信を動画として保存できるソフトウェアです。 livedlの使い方 URLを指定するだけで録画が開始します。 そして動画に変換して、オフラインで視聴できます。 livedlはSQLite3ファイルとしてデータを保存します。そしてlivedlにSQLite3ファイルをドロップすると動画に変換する仕組みになっています。ニコ生以外にもツイキャスやYouTube Liveにも対応しています。 livedlはGo製のオープンソース・ソフトウェア（MIT License）です。 l
プログレスバーの実装もこれなら簡単！複数ファイルにも対応した超軽量JavaScriptライブラリ -preload-it | コリス
動画ファイル、音楽ファイル、画像ファイルなど、大容量のファイルを使用したコンテンツでは、プログレスバーがあると非常に便利です。さまざまなタイプのファイルをプリロードするための超軽量（1kb）JavaScriptライブラリを紹介します。 異なるタイプの複数ファイルを平行にロードする際もサポートした優れ物です。
Plyr - YouTube/VimeoをサポートしたWebメディアプレーヤ MOONGIFT
動画コンテンツをWeb上で再生するのに使えるのがvideoタグです。しかし素のままではとても使い勝手が悪いです。使いやすくするためには専用のプレーヤライブラリが欲しいでしょう。 今回紹介するPlyrはHTML5のメディアプレイヤーですが、YouTube/Vimeoにも対応しているのがポイントです。 Plyrの使い方 こちらは通常の動画の場合。シンプルですがボタンなどが見やすいデザインです。 オーディオにも対応しています。 YouTubeの場合。デフォルトのデザインの上にかぶせています。 Vimeoでも。こちらは殆ど違和感がありません。 Plyrを使うとYouTube上にあるコンテンツでもサーバ上にある動画でも同じく扱えます。色や機能を統一できればユーザの戸惑いもなくスムーズに使いこなせるでしょう。自社ブランドの色に合わせて使うのが良さそうです。 PlyrはJavaScript製のオープンソ
[CSS]YouTubeなどの動画をレスポンシブ対応で実装する現在主流とこれからのテクニック
動画は拡大縮小が簡単な画像とは異なり、アスペクト比を維持したままレスポンシブ対応で埋め込むと、幅のサイズだけが変わり、高さがそのままになってしまいます。 この問題を解決するには、動画を配置するiframeをdivなどの親コンテナで内包し、アスペクト比にあった高さをpaddingで指定し、親コンテナのサイズに合わせて動画のサイズを変更させます。 動画をレスポンシブ対応で実装する現在主流となっているテクニックの解説と、もっとスマートに実装できるこれからのテクニックを紹介します。 Experiments in fixed aspect ratios 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 動画をレスポンシブ対応で、アスペクト比を維持したまま配置 もっとスマートに実装するためのスタディ 動画をレスポンシブ対応で、アスペクト比を維
![[CSS]YouTubeなどの動画をレスポンシブ対応で実装する現在主流とこれからのテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/2dff0b306a31f4ce14295c1fa0d265a72accaeac/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017051901.png)
Reframe.js - iframeを自動リサイズするJavaScript MOONGIFT
iframeを使ってWebサイトのコンテンツを埋め込めるサービスが増えています。特に多いのがYouTubeやVimeoなどの動画共有サイトです。埋め込むのは簡単なのですが、厄介なのはコンテンツがレスポンシブでないことです。 ブログなどをスマートフォンで表示すると動画の分だけ表示がはみ出てしまいます。そんな状態を改善するのがReframe.jsです。 Reframe.jsの使い方 Reframe.jsを実行するのは簡単です。以下のコードだけで使えます。 reframe('selector'); デスクトップサイズの場合。 幅を縮めても問題ありません。 Reframe.jsの特徴としては外部のJavaScriptライブラリに非依存ということでしょう。特にブログなどで活躍するのではないでしょうか。またハイブリッドアプリでも使えそうです。 Reframe.jsはJavaScript製のオープンソー
SuperEmbed.js - 動画埋め込みの幅を可変に MOONGIFT
YouTubeやVineなどの動画サイトはとても良いコンテンツで、ブログやWebサイトに埋め込んでいる人は多いかと思います。しかし厄介な問題として、単純に埋め込むとレスポンシブなWebサイトの幅変更に追従できないという問題があります。 それを解決してくれるのがSuperEmbed.jsです。モバイルからデスクトップまで、一つの埋め込みコードで対応できるようになります。 SuperEmbed.jsの使い方 使い方はとても簡単で、ただJavaScriptを読み込むだけです。 <script src="superembed.min.js"></script> これだけでYouTube、Vimeo、Vime、VideoPress、DailyMotionなど（他にも）の動画を自動的に可変にしてくれます。 SuperEmbed.jsはIE9以上で使えます。jQueryなどの依存ライブラリはありませんの
video-resize - videoタグの大きさをダイナミックに変更
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTML5で追加されたタグの中で注目度が高いのはvideoタグではないでしょうか。動画は人気コンテンツの一つですし、Flashが終わる中とあってvideoタグに期待がかかっています。 しかしそんなvideoタグはあまり柔軟にできていません。例えばリサイズですが、標準では問題があるのでvideo-resizeを使ってカバーしましょう。 video-resizeの使い方 video-resizeを使っているところです。 大きいときの表示。 高さを変えた時の表示。 video-resizeが便利なのはウィンドウの高さの変化にも追従してくれることです。レスポンシブは幅の変化に合わせますが、video-resizeは高さにも関係してきます。そして、なるべく全体が見られるような状態を維持してく
[JS]簡単で高性能！動画を背景としてブラウザやコンテナいっぱいに配置するレスポンシブ対応の軽量スクリプト -Bideo.js
動画を背景としてブラウザいっぱいに、もしくは指定したコンテナいっぱいに配置するレスポンシブ対応の単体で動作する軽量スクリプトを紹介します。 Bideoはおそらく、Background Videoの略でしょうかね。
![[JS]簡単で高性能！動画を背景としてブラウザやコンテナいっぱいに配置するレスポンシブ対応の軽量スクリプト -Bideo.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/442270a5803a50e9c86fc69781ff5060493cfb53/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016052501.png)
Jquery image player | UIPlayGround
Animation controls similar to those of a Video Player Animation controls similar to those of a Video Player Animation controls similar to those of a Video Player Play Animation controls similar to those of a Video Player Play Animation controls similar to those of a Video Player Pause Animation controls similar to those of a Video Player Resume Animation controls similar to those of a Video Player
[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)
Make an HTML5 video a background
About This jQuery plugin enables you to very easily use an HTML5 video as a background to a website or any div. For browsers that don't support the HTML5 video tag, it just uses an image. Warning Don't abuse this code... Don't use it too often, too many video instances will slow down the browser. Please bear in mind bandwidth usage for both you, and your visitors
[CSS]動画を背景に使い、オーバーレイでコンテンツを配置するテクニック（IE8、スマホへの対応方法）
動画を背景としてブラウザいっぱいに表示し、その上にオーバーレイでコンテンツを配置するCSSのテクニックを紹介します。 動画の背景はレスポンシブ対応、video要素に対応していないIE8や、動画の自動再生に対応していないスマホへの対応方法も！ Create Fullscreen HTML5 Page Background Video 下記は各ポイントを意訳したものです。 以前紹介した時（前の記事）からアップデートされ、実装の解説も充実しているので、改めて許可を得て翻訳しました。 中の人は、Smashing Magazineのエディタさんです。 動画を背景に使う時の大切なポイント デモ CSSで動画を背景にしたコンテンツを実装する方法 動画を背景に使う時の大切なポイント 動画をサイトに使う時は、動画が単にかっこいいからという理由ではなく、サイトのメッセージが伝えられる動画を使用しましょう。 動
![[CSS]動画を背景に使い、オーバーレイでコンテンツを配置するテクニック（IE8、スマホへの対応方法）](https://cdn-ak-scissors.b.st-hatena.com/image/square/bacd812f6000c78e30e028d375e68638a387b65a/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014090501-01.png)
VOBをwmvやflvに変換する方法
VOBファイルをwmvやflvに変換する方法を紹介します。 １．はじめに VOBというのはDVDのファイル形式です。 VOB形式を直接YouTubeにアップロードすることはできないので他の形式に変換したいのですが、変換する方法が分かりません。 ということで、VOBファイルをwmvやflvに変換する方法を紹介します。 ここではWindowsで「XMedia Record」というフリーソフトを利用する方法を解説します。 ２．XMedia Recordのダウンロード・インストール XMedia Recordのページにアクセスして、左側のメニューにある「Download」をクリック。 Downloadのページに何種類かのダウンロードリンクがあるので、一番上の「XMedia Recode」の「Download」をクリック（執筆時点のバージョンは3.1.9.1）。 ファイルのダウンロードが始まるので任
[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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
|| Social Media Sizes 2023 + Templates ||
[CSS] object-fitの使い方: レスポンシブ対応、動画や画像をブラウザいっぱいに表示するCSSのテクニック![[CSS] object-fitの使い方: レスポンシブ対応、動画や画像をブラウザいっぱいに表示するCSSのテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/eca9086338399b021f0f7184c9d87872b7931c55/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017053101-01.png)
https://dvlden.github.io/