YouTube ビデオを活用する

レスポンシブなYouTube埋め込み方法

📺 レスポンシブデザイン

YouTubeビデオを埋め込む際、レスポンシブデザインに対応させることで、どんな画面サイズでも適切に表示されます。

🎯 簡単実装

「video-container」クラスを使用することで、わずか数行のコードで実装できます。

動画デモ
ポイント： 「video-container」クラスを設定することで、どんな画面サイズでも適切にビデオが表示されます。
埋め込みコード例
<div class="video-container">
    <iframe src="https://www.youtube.com/embed/VIDEO_ID"
     title="YouTube video player"
     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
     allowfullscreen></iframe>
</div>
ホームに戻る