masakichi-code

Youtubeリンクからiframeに変換するコード【URLで完結できます】

WordPress
PHP

2025.07.18(金)

『Youtubeからiframe埋め込みしたいけど簡単にやりたい』
『Youtubeリンクからifameを自動で出したい』

こういった疑問に答えます。

本記事の内容

Youtubeリンクからiframeに変換するコードの紹介
Youtubeリンクからiframeに変換するコードの紹介【強化版】

Webエンジニア歴3年2ヶ月
WordPressの運営＆立ち上げ100サイト以上かかわっている

こういった私が解説していきます。

1. Youtubeリンクからiframeに変換するコードの紹介

その①：Youtubeリンクからiframeに変換するコード
その②：Youtubeリンクからiframeに変換するコード【ACF対応】

それでは順番に解説していきます。

その①：Youtubeリンクからiframeに変換するコード

まずはコードをお見せします

<?php
function convertYouTubeUrlToIframe($url, $width = 560, $height = 315) {
    // YouTubeの動画IDを抽出
    if (preg_match('/(?:youtu\.be\/|youtube\.com\/(?:watch\?v=|embed\/|v\/|shorts\/))([a-zA-Z0-9_-]{11})/', $url, $matches)) {
        $videoId = $matches[1];
        $embedUrl = "https://www.youtube.com/embed/" . $videoId;

        // iframeタグ生成
        return '<iframe width="' . $width . '" height="' . $height . '" src="' . $embedUrl . '" frameborder="0" allowfullscreen></iframe>';
    } else {
        // 無効なURLの場合
        return '無効なYouTubeのURLだよ';
    }
}

// テスト例
$url1 = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
$url2 = "https://youtu.be/dQw4w9WgXcQ";

echo convertYouTubeUrlToIframe($url1);
echo "<br>";
echo convertYouTubeUrlToIframe($url2);
?>

<?php

function convertYouTubeUrlToIframe($url, $width = 560, $height = 315) {

// YouTubeの動画IDを抽出

if (preg_match('/(?:youtu\.be\/|youtube\.com\/(?:watch\?v=|embed\/|v\/|shorts\/))([a-zA-Z0-9_-]{11})/', $url, $matches)) {

$videoId = $matches[1];

$embedUrl = "https://www.youtube.com/embed/" . $videoId;

// iframeタグ生成

return '<iframe width="' . $width . '" height="' . $height . '" src="' . $embedUrl . '" frameborder="0" allowfullscreen></iframe>';

} else {

// 無効なURLの場合

return '無効なYouTubeのURLだよ';

}

// テスト例

$url1 = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";

$url2 = "https://youtu.be/dQw4w9WgXcQ";

echo convertYouTubeUrlToIframe($url1);

echo "<br>";

echo convertYouTubeUrlToIframe($url2);

コードの通りで、『preg_match』でURLの動画IDを拾ってきて、自作のiframeタグに入れて表示させています。
動画IDを拾ってきているので、URLを共有の手順を踏まなくとも、開いている画面のURLを入れても表示されています。
次では、WordPress管理画面のACFフィールドに入れた値を出力することを想定して記述してます。

その②：Youtubeリンクからiframeに変換するコード【ACF対応】

コードはこんな感じです

ACFを使っていて、ACF名は「youtube_link」として記載していますので、使用している環境に合わせて直してくださいね。

<?php
  function convertYouTubeUrlToIframe($url, $width = 560, $height = 315) {
    // YouTubeの動画IDを抽出
    if (preg_match('/(?:youtu\.be\/|youtube\.com\/(?:watch\?v=|embed\/|v\/|shorts\/))([a-zA-Z0-9_-]{11})/', $url, $matches)) {
      $videoId = $matches[1];
      $embedUrl = "https://www.youtube.com/embed/" . $videoId;

      // iframeタグ生成
      return '<iframe width="' . $width . '" height="' . $height . '" src="' . $embedUrl . '" frameborder="0" allowfullscreen></iframe>';
    } else {
      return '無効なYouTubeのURLだよ';
    }
  }

  // ACFからURL取得
  $youtube_url = get_field('youtube_link');

  if ($youtube_url) {
    echo convertYouTubeUrlToIframe($youtube_url);
  } else {
    echo 'YouTubeリンクが設定されてないよ';
  }
?>

<?php

function convertYouTubeUrlToIframe($url, $width = 560, $height = 315) {

// YouTubeの動画IDを抽出

if (preg_match('/(?:youtu\.be\/|youtube\.com\/(?:watch\?v=|embed\/|v\/|shorts\/))([a-zA-Z0-9_-]{11})/', $url, $matches)) {

$videoId = $matches[1];

$embedUrl = "https://www.youtube.com/embed/" . $videoId;

// iframeタグ生成

return '<iframe width="' . $width . '" height="' . $height . '" src="' . $embedUrl . '" frameborder="0" allowfullscreen></iframe>';

} else {

return '無効なYouTubeのURLだよ';

}

// ACFからURL取得

$youtube_url = get_field('youtube_link');

if ($youtube_url) {

echo convertYouTubeUrlToIframe($youtube_url);

} else {

echo 'YouTubeリンクが設定されてないよ';

}

2. Youtubeリンクからiframeに変換するコードの紹介【強化版】

先ほどのコードからよりカスタマイズされたコードをご紹介します。
実は、先ほどのコードではiframeタグが埋め込まれた時の考慮がされていません。
あらゆるケースに対応しておきましょう。

その①：Youtubeリンクからiframeに変換するコードの紹介【強化版】
その②：ACFに対応させたバージョン

その①：Youtubeリンクからiframeに変換するコードの紹介【強化版でACF対応】

強化されたコードはこちら

<?php
function convertYouTubeUrlToIframe($url, $width = 560, $height = 315) {
    // すでに iframe タグの場合はそのまま返す
    if (preg_match('/<iframe.*?src=["\']https:\/\/www\.youtube\.com\/embed\/([a-zA-Z0-9_-]{11})["\'].*?><\/iframe>/', $url)) {
        return $url;
    }

    // YouTubeの動画IDを抽出
    if (preg_match('/(?:youtu\.be\/|youtube\.com\/(?:watch\?v=|embed\/|v\/|shorts\/))([a-zA-Z0-9_-]{11})/', $url, $matches)) {
        $videoId = $matches[1];
        $embedUrl = "https://www.youtube.com/embed/" . $videoId;

        // iframeタグ生成
        return '<iframe width="' . $width . '" height="' . $height . '" src="' . $embedUrl . '" frameborder="0" allowfullscreen></iframe>';
    } else {
        // 無効なURLまたはiframeじゃないやつ
        return '無効なYouTubeのURLだよ';
    }
}

// テスト例
$testUrls = [
    'https://youtu.be/AlMdDpUWFFI?si=DW6pqW1PhPOHpFWU',
    'https://www.youtube.com/watch?v=-KzaxH3jx9Y',
    '<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>'
];

foreach ($testUrls as $url) {
    echo convertYouTubeUrlToIframe($url) . "<br><br>";
}
?>

<?php

function convertYouTubeUrlToIframe($url, $width = 560, $height = 315) {

// すでに iframe タグの場合はそのまま返す

if (preg_match('/<iframe.*?src=["\']https:\/\/www\.youtube\.com\/embed\/([a-zA-Z0-9_-]{11})["\'].*?><\/iframe>/', $url)) {

return $url;

}

// YouTubeの動画IDを抽出

if (preg_match('/(?:youtu\.be\/|youtube\.com\/(?:watch\?v=|embed\/|v\/|shorts\/))([a-zA-Z0-9_-]{11})/', $url, $matches)) {

$videoId = $matches[1];

$embedUrl = "https://www.youtube.com/embed/" . $videoId;

// iframeタグ生成

return '<iframe width="' . $width . '" height="' . $height . '" src="' . $embedUrl . '" frameborder="0" allowfullscreen></iframe>';

} else {

// 無効なURLまたはiframeじゃないやつ

return '無効なYouTubeのURLだよ';

}

// テスト例

$testUrls = [

'https://youtu.be/AlMdDpUWFFI?si=DW6pqW1PhPOHpFWU',

'https://www.youtube.com/watch?v=-KzaxH3jx9Y',

'<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>'

];

foreach ($testUrls as $url) {

echo convertYouTubeUrlToIframe($url) . "<br><br>";

}

上記コードではiframeも考慮されていて、Youtubeのiframe埋め込みの場合はそのまま返す。
Youtubeリンクで来たらiframeに変換します。
上記で問題なければ早速ACF対応バージョンを見てみましょう。

その②：ACFに対応させたバージョン

もっとカスタマイズした強化版です

<?php
  function convertYouTubeUrlToIframe($url, $width = 560, $height = 315) {
    // すでに iframe タグの場合はそのまま返す
    if (preg_match('/<iframe.*?src=["\']https:\/\/www\.youtube\.com\/embed\/([a-zA-Z0-9_-]{11})["\'].*?><\/iframe>/', $url)) {
      return $url;
    }

    // YouTubeの動画IDを抽出
    if (preg_match('/(?:youtu\.be\/|youtube\.com\/(?:watch\?v=|embed\/|v\/|shorts\/))([a-zA-Z0-9_-]{11})/', $url, $matches)) {
      $videoId = $matches[1];
      $embedUrl = "https://www.youtube.com/embed/" . $videoId;

      // iframeタグ生成
      return '<iframe width="' . $width . '" height="' . $height . '" src="' . $embedUrl . '" frameborder="0" allowfullscreen></iframe>';
    } else {
      return '無効なYouTubeのURLだよ';
    }
  }

  // ACFからYouTubeリンク取得
  $youtube_url = get_field('youtube_link');

  if ($youtube_url) {
    echo convertYouTubeUrlToIframe($youtube_url);
  } else {
    echo 'YouTubeリンクが設定されてないよ';
  }
?>

<?php

function convertYouTubeUrlToIframe($url, $width = 560, $height = 315) {

// すでに iframe タグの場合はそのまま返す

if (preg_match('/<iframe.*?src=["\']https:\/\/www\.youtube\.com\/embed\/([a-zA-Z0-9_-]{11})["\'].*?><\/iframe>/', $url)) {

return $url;

}

// YouTubeの動画IDを抽出

if (preg_match('/(?:youtu\.be\/|youtube\.com\/(?:watch\?v=|embed\/|v\/|shorts\/))([a-zA-Z0-9_-]{11})/', $url, $matches)) {

$videoId = $matches[1];

$embedUrl = "https://www.youtube.com/embed/" . $videoId;

// iframeタグ生成

return '<iframe width="' . $width . '" height="' . $height . '" src="' . $embedUrl . '" frameborder="0" allowfullscreen></iframe>';

} else {

return '無効なYouTubeのURLだよ';

}

// ACFからYouTubeリンク取得

$youtube_url = get_field('youtube_link');

if ($youtube_url) {

echo convertYouTubeUrlToIframe($youtube_url);

} else {

echo 'YouTubeリンクが設定されてないよ';

}

こんな感じでケースを想定することで、入力者の手間が省けるのもいいですね。

以上、Youtubeリンクからiframeに変換するコードをご紹介しました。
ではまた。

< 前の記事一覧へ戻る

masakichi

カテゴリー

アーカイブ

2025 (1)
2024 (15)
2023 (18)
2022 (8)