サイトにYouTube動画を埋め込む方法と、クリックで再生させる実装手順をご紹介！

今回はサイトの中にYouTubeの特定の動画を埋め込み、
クリックするとサイト内で再生される方法を動画にしてみました。

動画をクリックすると、わざわざYouTubeに飛ばされずにその場で再生できたら便利なのに
と思ったことないですか？
今回は、YouTubeのトップページへのリンクと、特定の動画を埋め込んで再生する方法の
両方を取り上げ、HTML・CSSでの具体的なコードを記事にしてみました。

特定のYouTube動画を埋め込む手順
レスポンシブ対応も簡単！
実際のコードを大公開！
1. 実際に書いたHTMLコード
2. 実際に書いたCSSコード
サイト作成・運営におすすめのサーバー「エックスサーバー」
まとめ
YouTube動画

特定のYouTube動画を埋め込む手順

YouTubeの動画ページから「共有」ボタンをクリックします。

「埋め込む」ボタンをクリックします。

動画をサイトに埋め込むためのHTMLコードが表示されます。
コピーをクリックでURLがコピーされるので、表示したいところに貼り付けます。

この埋め込みコードを、HTMLのiframeタグとして活用することで、
YouTube動画をサイト内で直接再生可能な状態にすることができました。

レスポンシブ対応も簡単！

今回の実装では、、フォントサイズや余白部分のレスポンシブは、
自作の「フォントサイズ自動変更スクリプト」を活用しました。

もちろん、デザインに関してはお好みでカスタマイズ可能なので、
オリジナルのデザインに仕上げることもできます。

実際のコードを大公開！

今回の動画にて解説している、HTML・CSSそれぞれのコードを下記に掲載しています。

実際に書いたHTMLコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Youtuber</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section class="movie-box bg-grade-btm">
        <div class="topics-movie bg-grade-top">
            <div class="container">
                <div class="section-title-box">
                    <h2 class="section-title">いのぷろチャンネル</h2>
                    <p class="section-title-en">YouTube channel</p>
                </div>
                <div class="section-title-box">
                    <h3 class="section-title">動画コンテンツ</h3>
                </div>

                <div class="movie-contents">
                    <div class="movie-contentbox">
                        <div class="thubnail-container" onclick="playvideo()">
                            <a href="https://www.youtube.com/channel/UC7Yc-8AWHV5Wq5Gq0g_hsdA" target="_blank" rel="noopener noreferrer">
                                <img class="thubnail-image" src="imgs/banner2.jpg" alt="サムネイル画像">
                            </a>
                        </div>
                    </div>

                    <div class="movie-contentbox">
                        <iframe src="https://www.youtube.com/embed/XcQij5w5Nlg?si=tXr3KrdsppoitKxn" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Youtuber</title>

</head>

<body>

<h2 class="section-title">いのぷろチャンネル</h2>

<p class="section-title-en">YouTube channel</p>

</div>

<h3 class="section-title">動画コンテンツ</h3>

</div>

</a>

</div>

</div>

</section>

</body>

</html>

実際に書いたCSSコード

@charset "utf-8";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.movie-box {
  padding-top: clamp(50px, 6.6489vw + -1.06px, 100px);
}

.bg-grade-btm {
  position: relative;
}

.bg-grade-btm::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(30px, 3.9894vw + -0.64px, 60px);
  background: linear-gradient(to bottom, rgb(227, 245, 247) 0%, transparent 100%);
}

.container {
  max-width: 100%;
  width: 1520px;
  margin: 0 auto;
  padding: 0 clamp(20px, 2.6596vw + -0.43px, 40px);
}

.section-title-box {
  text-align: center;
  margin-bottom: clamp(30px, 6.6489vw + -21.06px, 80px);
}

.section-title {
  display: inline-block;
  font-size: clamp(24px, 1.0638vw + 15.83px, 32px);
  border-bottom: 1px solid #444444;
}

.section-title-en {
  display: block;
  font-size: clamp(16px, 0.2660vw + 13.96px, 18px);
}

.movie-contents {
  display: flex;
  justify-content: space-around;
  border: 1px solid #444444;
  padding: clamp(40px, 5.3191vw + -0.85px, 80px) 0;
  margin-top: clamp(30px, 6.6489vw + -21.06px, 80px);
}
@media only screen and (max-width: 767px) {
  .movie-contents {
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
  }
  
}

.movie-contents .movie-contentbox {
  width: 45%;
  height: auto;
  aspect-ratio: 16/9;
  margin: auto;
}

img {
  width: 100%;
  height: 100%;
  vertical-align: bottom;
  object-fit: cover;
}

@media only screen and (max-width: 767px) {
  .movie-contents .movie-contentbox {
    width: 90%;
  }
}

.movie-contents .movie-contentbox > iframe {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0 auto;
  border: none;
}

@charset "utf-8";

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

.movie-box {

padding-top: clamp(50px, 6.6489vw + -1.06px, 100px);

}

.bg-grade-btm {

position: relative;

}

.bg-grade-btm::before {

content: "";

position: absolute;

top: 0;

left: 0;

width: 100%;

height: clamp(30px, 3.9894vw + -0.64px, 60px);

background: linear-gradient(to bottom, rgb(227, 245, 247) 0%, transparent 100%);

}

.container {

max-width: 100%;

width: 1520px;

margin: 0 auto;

padding: 0 clamp(20px, 2.6596vw + -0.43px, 40px);

}

.section-title-box {

text-align: center;

margin-bottom: clamp(30px, 6.6489vw + -21.06px, 80px);

}

.section-title {

display: inline-block;

font-size: clamp(24px, 1.0638vw + 15.83px, 32px);

border-bottom: 1px solid #444444;

}

.section-title-en {

display: block;

font-size: clamp(16px, 0.2660vw + 13.96px, 18px);

}

.movie-contents {

display: flex;

justify-content: space-around;

border: 1px solid #444444;

padding: clamp(40px, 5.3191vw + -0.85px, 80px) 0;

margin-top: clamp(30px, 6.6489vw + -21.06px, 80px);

}

@media only screen and (max-width: 767px) {

.movie-contents {

flex-direction: column;

align-items: center;

flex-wrap: wrap;

gap: 20px;

}

.movie-contents .movie-contentbox {

width: 45%;

height: auto;

aspect-ratio: 16/9;

margin: auto;

}

img {

width: 100%;

height: 100%;

vertical-align: bottom;

object-fit: cover;

}

@media only screen and (max-width: 767px) {

.movie-contents .movie-contentbox {

width: 90%;

}

.movie-contents .movie-contentbox > iframe {

display: block;

width: 100%;

height: 100%;

object-fit: cover;

margin: 0 auto;

border: none;

}

サイト作成・運営におすすめのサーバー「エックスサーバー」

これからWebサイトを本格的に運営していくなら、信頼性の高いレンタルサーバーを選ぶことが非常に重要です。特に、動画埋め込みなどを活用したサイトでは安定した表示速度や高いセキュリティ性能が求められます。

そこでおすすめなのが【エックスサーバー】です。

高速で安定したサーバー環境
WordPressとの相性も抜群
初心者でも安心のサポート体制
独自ドメイン永久無料キャンペーン実施中（※タイミングによります）

現在、エックスサーバーでは新規契約キャンペーンも実施中です。
この機会に、ぜひ以下のリンクからチェックしてみてください！

👉 エックスサーバーの新規契約はこちら

まとめ

今回の記事では、以下の内容を中心にご紹介しました：

YouTube動画をWebサイトに埋め込む方法
クリックするとサイト内で再生される仕組み
レスポンシブ対応の方法とフォント調整
実際のHTML/CSSコードの紹介
サイト運営に最適なエックスサーバーのご案内

今後も、Web制作に役立つ情報を随時発信していきますので、ぜひ参考にしてみてください！

YouTube動画

おすすめレンタルサーバー　Xserver

高速・多機能・高安定レンタルサーバー『エックスサーバー』

私も使ってるレンタルサーバーになります
独自ドメインが永久無料・マルチドメイン、メールアドレス無制限！