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プロパティは名前の通り、アスペクト比を
mp4fpsmod - MPEG4のタイムエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 動画フォーマットとしてMPEG4はデファクトになっていると言えます。スマートフォンでも動画撮影する機会が増え、動画コンテンツが爆発的に増えています。そんな中、動画を編集するツールはあまり多くありません。 例えば動画が音ずれしていた時にどうすれば良いでしょうか。使ってみたいのがmp4fpsmodです。 mp4fpsmodの使い方 コマンドの実行例です。動画の速度を遅くしたり、音声を数秒ずらして実行したりできます。 生成された動画の質は元の動画と見た限りは変わりません。 mp4fpsmodは動画編集の中でも時間に関するものだけに限定して実行できます。流れを遅くしたり、音声をずらしたりできるのが特徴です。動画編集ソフトウェアを使えばできるのはもちろんですが、高価だったり操作が面倒なものが
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などの依存ライブラリはありませんの
YouTubeやVimeoの音質を自分好みに操作できるChrome拡張機能「Audio EQ」
PCの音質を改善するには、スピーカーで外部へ出力するか、PCのシステムのオーディオ設定を変更するといった方法がありますが、YouTubeやVimeoなどの再生音だけにイコライザーをかけて好みの音質に設定できる無料のChrome拡張機能が「Audio EQ」です。 Chrome Audio EQ - Google Chrome extension http://lab.ejci.net/Chrome-Audio-EQ/ Audio EQ - Chrome ウェブストア https://chrome.google.com/webstore/detail/audio-eq/lfafdlnjaliaghpjdajmlcnnblkgcefh(※ページ消滅済み) 「Audio EQ」をインストールするには「Chromeに追加」をクリック。 「追加」をクリック。 すると右上にAudio EQのアイコンが
CSS: Elastic Videos - Web Designer Wall
While I was coding the Elemin Theme (a responsive WordPress theme that I recently designed), one of the challenges that I faced was to make the embedded videos elastic. Using the max-width:100% and height:auto trick works with native HTML5 video tag, but it doesn’t work with embed code using iframe or object tag. After hours of experimenting and Googling, I finally found a trick on how to achieve
無料であらゆるファイル再生可能＆コーデック不要なプレイヤー「VLC」
Windows・Linux・Mac OS X、加えてiOSやAndroid、OS/2、Solaris、FreeBSDなどのBSD系、QNX、Syllableなどでも動作し、MPEG-2/H.264/DivX/MPEG-4/WebM/WMVなどの各種ムービーファイルの再生が可能、さらにDVD・CD・VCD・Blu-Rayも再生でき、ウェブカメラなどのストリーミングも再生可能、マルチコア対応やGPU再生支援によるHDや10bitsムービーの軽い再生も可能、しかも完全に無料で利用でき、スパイウェアや広告の類は一切なし、ユーザーを追跡するような仕組みも一切ないのが、オープンソースでクロスプラットフォームなマルチメディアプレイヤー「VLC」です。あらゆるメニューが日本語化されているので安心して利用できます。 1996年から連綿と開発と改良が続けられており、このたびついにコードネーム「Twoflowe
ページ幅に応じてYoutube動画などを自動リサイズしてくれるjQueryプラグイン「FitVids.js」:phpspot開発日誌
ページ幅に応じてYoutube動画などを自動リサイズしてくれるjQueryプラグイン「FitVids.js」 2011年09月13日- FitVids.JS - A lightweight, easy-to-use jQuery plugin for fluid width video embeds. ページ幅に応じてYoutube動画などを自動リサイズしてくれるjQueryプラグイン「FitVids.js」 通常、リキッドなレイアウトではテキストは折り返されてもビデオは縮小されません。先日FitTextというソリューションを紹介しましたが、これはテキストと画像のみというものでした。 FitVids.jsを組み合わせることで、動画もページ幅に応じてリサイズが可能 ブラウザを縮小で動画も縮小 ソースを見ると、object, embedや iframe srcの vimeo や youtube
Fluid Width YouTube Videos | CSS-Tricks
This article was originally written on September 2, 2010 and is now being updated to be mo’ better. It now handles YouTube videos of different aspect ratios, the new iframe embed method, and with more efficient scripts. The code that YouTube gives you to embed a video is now a very simple iframe. Here’s an example: <iframe width="1280" height="750" src="//www.youtube.com/embed/fXm9EwzSjO4?rel=0&am
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA