サイトを常時SSL化する前準備。YouTube埋め込みタグの変更
サイトをSSL化すると変更しなければならない作業がどっと増えるので、その前にまずはできる部分から少しずつ変えていくことにしました。手始めにサイトに埋め込んでいるYouTube動画の埋め込みタグから。YouTubeのタグのSSL化はとっても簡単。一括置換すればいいだけです。
当サイトではアフィリエイト広告を利用しています。
リンクや画像に広告が含まれている場合があることを予めご了承ください。
古いタグと新しいタグを比較
旧タグ
<iframe width="300" height="200" src="http://www.youtube.com/embed/APnyePKHvKA" frameborder="0" allowfullscreen></iframe>
新タグ
<iframe width="560" height="315" src="https://www.youtube.com/embed/APnyePKHvKA" frameborder="0" allowfullscreen></iframe>
古い方のタグをランダムに10個取り出して新しく取得したタグと比較した所、違いは『s』が付いているかいないかだけでした。つまり、一括置換すれば簡単に埋め込みタグをSSL化できるわけです。
※width、heightの数字が違いますが、こちらで意図した数字にしているだけです。SSL化には関係ないので違っていても問題ありません
試しに1ページ分一括置換して確認してみました
YouTube動画を7つ埋め込んでいるページがあって、その全タグを試しに一括置換してみました。置換する文字列は以下の通り。
『http://www.youtube.com/』
↓
『https://www.youtube.com/』
『http:』だけだと関係ないものまで変えてしまうので、『youtube.com』まで対象にしています。
ただし、『embed/』までは含めません。私のサイトでは埋め込み以外にYouTube内の自分のチャンネルページへのリンクもあるので、embedを含めるとその分が変更されません。
今回は埋め込みタグを含めたYouTubeへのリンク変更をターゲットとしています。埋め込みだけなら『embed/』を含む文字列で指定した方が良いでしょう。
一括置換して動作を確認してみましたが、問題なく表示・再生されました。
SSL化しよう
タグを改めて取得する必要が無くて助かりました。動画の数も100以上あるので良かったです。
SSL化はいずれ必須になるでしょうから見過ごせません。YouTubeもすでに対応しているのでこれを機にちゃちゃと変更しておきましょう。
2019/9/26 追記
改めてYouTube埋め込みコードを取得したところ、以前よりコードが増えています。
<iframe width="560" height="315" src="https://www.youtube.com/embed/APnyePKHvKA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
違いは赤字の部分。ここが増えています。
SSL化したコードでも再取得したコードでも結果的に同じ動画が表示されますが、YouTube側も理由なく余計な記述を増やすことはないと思うので、意味があって増やしているのでしょう。
いくつか動画のコードを見繕って比較してみるといいかもしれません。赤字部分が増えているだけなら一括変換も可能でしょう。
とはいえ、ここまでくると再取得してコードを張り替えた方が安全かつ確実に移行できると思います。あまり難しく考えたくない場合は素直に差し替えましょう。
