iframeのネイティブLazy-loadがウェブ標準に、<iframe>タグにloading=lazy属性を追加するだけで遅延読み込み可能に
Native lazy-loading for <iframe> was added to the HTML standard today: https://t.co/KgO8lIBdEK Thanks @domfarolino for the heavy lifting with spec & tests 🎉 https://t.co/GLy6qHE7l5 — Simon Pieters (@zcorpan) July 8, 2020 YouTube 動画でネイティブ Lazy-load ネイティブ Lazy-load は、loading=lazy 属性を追加するだけで遅延読み込みを可能にします。 専用の JavaScript は不要です。 ブラウザの標準機能として Lazy-load をサポートします。 もとともは Chrome の独自機能として Google が開発しました。 Ch
phpでYoutubeの短縮URLを埋め込み用URLに変換して出力する方法 – ITblog
PHPで、Youtubeの短縮URLを、埋め込み用URLに変換して出力する方法についての解説です。 Youtubeの短縮用URLとは、 上記のようなURLで、Youtubeの動画を共有ボタンを押すと表示されて、それをSNSやブログに投稿すると、Youtubeの動画が埋め込まれた状態で出力されます。 これは、例えばそれぞれのブログエンジンや、SNSなどが上記の短縮URLを埋め込み用のコードに変換して出力する仕様になっているのでそのようになっています。 そのため、例えばPHPのファイルで、上記のYoutubeの短縮用URLを受け取ってそのまま出力すると、そのまま短縮用のURLが出力されるだけで、埋め込まれた状態で出力されません。 これをそのまま埋め込み用の動画として出力したい場合は、埋め込み用のURLに変換して出力する必要があり、そのための関数を作ってやると出力することができます。 埋め込み用
Reframe.js - iframeを自動リサイズするJavaScript MOONGIFT
iframeを使ってWebサイトのコンテンツを埋め込めるサービスが増えています。特に多いのがYouTubeやVimeoなどの動画共有サイトです。埋め込むのは簡単なのですが、厄介なのはコンテンツがレスポンシブでないことです。 ブログなどをスマートフォンで表示すると動画の分だけ表示がはみ出てしまいます。そんな状態を改善するのがReframe.jsです。 Reframe.jsの使い方 Reframe.jsを実行するのは簡単です。以下のコードだけで使えます。 reframe('selector'); デスクトップサイズの場合。 幅を縮めても問題ありません。 Reframe.jsの特徴としては外部のJavaScriptライブラリに非依存ということでしょう。特にブログなどで活躍するのではないでしょうか。またハイブリッドアプリでも使えそうです。 Reframe.jsはJavaScript製のオープンソー
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
dev7studios
