ユーチューブ音楽動画

YouTube音楽動画ギャラリー

このページの作り方

利用しているWeb技術

HTML

WordPressのTwenty ThirteenにコーディングされているCSS(カスケーディングスタイルシート)のgallery系スタイルを利用してHTMLを組んでいる。

初期表示では、動画のサムネイル画像を読み込むようにして表示が遅くならないページにした。

画像を読むだけで読み込み負荷が高くなる動画の複数読み込みを回避することにより、ページを高速に表示できるだけでなく、画像のaltタグを設定することで、SEO対策に配慮してみた。

jQuery

初期表示で画像のみが表示されるが、フロント側のコードでクリックされた画像をYouTube動画に置き換える処理を書いてある。クリックされたタイミングで該当する動画のみが読み込まれるため、ユーザービリティを損ねることなく、動画の閲覧が出来る。

実際のコード

スマホでも素早く読み込みが可能な動画ライブラリーを開発のページにHTMLやjQueryのコードを載せてあるので、動画ギャラリーを作成しようとしている人や動画の読み込みが遅くて困っている人は参考にして頂きたいと思います。

Webエンジニアブログにコメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ユーチューブ音楽動画の記事にコメントを投稿