新機能の使い方や、ウェブサイトの構築・運用に役立つTIPSを紹介しています。使って背景動画を設置するここ数年、ウェブサイトの背景に動画が使われているのをよく見かけるようになりました。使い方によっては非常に効果的ではありますが、動画はファイル容量が大きくなるため、転送量の増大が懸念され(MovableType.netでは、プランによってご利用いただける転送量の目安があります)、さらにスマートフォンなどの場合は、動画ではなく画像を表示させるなどの工夫が必要になります。使って背景動画を実現する方法をご紹介します。実際にテーマOnePageをベースに作成したデモサイトは以下になります。APIの詳細については、以下の公式サイトをご覧ください。リファレンス動画をYouTubeにアップロードしておくまず、動画をYouTubeの自分のアカウントにアップロードしておきます。背景用動画を用意する際のポイントは、以下の3点です。指定されているコードを表示させたいページに貼り付けます。今回はトップページに表示させるため、以下のようなソースをhead内に記述しています。ポイントは以下になります。上記で、指定した箇所に動画が表示されますが、幅や位置などの調整は見せ方によってCSSで行ってください。スマートフォン、タブレットでは画像を表示するスマートフォンやタブレットはモバイルデータ通信でアクセスしている可能性が高いため、容量の多い動画は読み込まずに画像を表示させる、など工夫が必要になります。今回のデモサイトではJavaScriptで実現し、YouTubeのスクリプト部分を以下のifで囲むことによって、スマートフォンやタブレットの場合は動画を読み込まないようにしています。(背景画像は別途CSSで指定しておきます)if(!navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){}以上、YouTubeの動画を背景として利用する方法の一例をご紹介してきました。制作者向けポータルお問い合わせ・FAQ。