怠zyなロード埋め込みYouTubeビデオ

アーサー・コレンザンによって考案されたこの独創的な方法は、標準のYouTube埋め込みよりも大幅に改善されています。ユーザーインタラクションに関係なくかなりのリソースをロードする代わりに、YouTube埋め込みにリンクされた小さなプレースホルダー画像を採用しています。画像をクリックすると、ビデオ再生がシームレスに開始されます。

機能性は実質的に変更されていません。単純なクリックは、指定されたスペースでビデオを再生します。

鍵はにあります<iframe></iframe>TAGのsrcdoc属性。この属性により、インラインスタイリングと同様に、ドキュメント全体について、タグにHTMLドキュメント全体を直接埋め込むことができます。この手法は、MailChimp Newslettersなどのコンテンツを埋め込むのに役立つことが証明されています。

アーサーは、IE 11の互換性とエイドリアンのアクセシビリティ強化に対するレミーの貢献を認めています。

コメントにおけるヒューの提案も注目に値します。 Chromeのネイティブの怠zyな読み込みサポートを考えると、 loading="lazy"を追加すると、パフォーマンスがさらに最適化され、ビデオがビューポートの外側にある場合はリクエストを防ぎます。

これがデモンストレーションです：

読者のTracey Richは、明確に改善するためにUnicode Playボタンの代わりに►を使用することを提案しました。

以上が怠zyなロード埋め込みYouTubeビデオの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。