WordPressにYouTube動画を埋め込みコードで貼る場合に注意する事

WordPressにYouTubeの動画を埋め込む時に、動画ページのURLや短縮URLを貼り付けている場合は問題無いかと思いますが、埋め込み用のコードを利用して貼り付けている場合は気をつけた方がいいかもしれない事があります。

と言っても、今のところ特に実害があるわけでもなさそうですし、WordPressを使っていれば割とよくある話ではありますが、今回はそんなYouTubeの動画埋め込み時のちょっとした注意点になります。

エディタを切り替えるとコードが一部変わってしまう

これはWordPressかTinyMCE、またはそれ以外の何かの仕様によるものなのかはわかりませんが、例えばYouTubeからコピってきた以下のようなコードをテキストエディタに貼り付けたとします。

YouTubeの埋め込み用コード

<iframe src="https://www.youtube.com/embed/12345678901" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

私の場合はレスポンシブで横幅いっぱいに表示させるのでwidthとheightは削ってあります。

これを一旦ビジュアルエディタに切り替えてからテキストエディタに戻すと…

ビジュアルエディタ ⇔ テキストエディタの切り替えを行った場合

<iframe src="https://www.youtube.com/embed/12345678901" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

スクロールしないと見えない部分なので少々わかりにくいかもしれませんが、allowで指定されていた部分がごっそり削除されて、allowfullscreenだけ現在では非推奨な形に置換されます。なんて余計な事を…

この現象を防止するには

利用しているテーマによって若干違ってくる可能性もありますが、何れにしてもコードを勝手に変えられるのは何だか納得いかないので、YouTubeの埋め込みコードを記事中に貼り付けている場合はビジュアルエディタとテキストエディタの切り替えを行わないようにするか、どうしても切り替えながら編集する必要がある場合は動画の貼り付けは最後にする方がよさそうです。

自動整形をカスタマイズする方法もありそうですが、あれをイジると大抵どこか違うところがおかしくなるので…

YouTube動画貼り付け時の小ネタでした

実際の問題としてこれで何か困る事があるのかと言われたら特にこれと言って無いんですが、YouTube側で意図している動作とは違ってくる可能性もあるのでなるべくそのまま利用した方がいいのではないかと思った次第です。