WordPressで動画を埋め込む際に詰まったこと

WordPressで動画を埋め込みたいと思い、以前の記事で動画を埋め込みました。しかし、動画を表示することは簡単ではありませんでした。

動画の埋め込み方法には以下の2種類があります。
・videoタグを使用し、メディアライブラリに追加した動画ファイル(mp4,webm,ogv等)を貼り付ける
・動画サイトに登録した動画のURLを貼り付ける

私の場合、これらの方法を両方試しても再生されない、何回もソースを見直して間違ってないと思いつつも書き直しても再生されない。今回は、どうやって解決したのかをお伝えしようと思います。

なぜ動画が再生されないか原因を調べたところWordPressの権限が「投稿者」の場合、投稿の編集画面ではソースが表示されているが、プレビュー又は公開した際に、特定のソースが消失するということでした。

videoタグの場合は<source>タグが無効化されてしまうようです。
&lt;video controls="controls" width="300" height="150"&gt;
&lt;source src='動画.mp4' type='video/mp4'&gt;
&lt;source src='動画.ogv' type='video/ogg'&gt;
&lt;source src='動画.webm' type='video/webm'&gt;

ご使用のブラウザでは動画を読み込めません。

&lt;/video&gt;

&lt;video controls="controls" width="300" height="150"&gt;

ご使用のブラウザでは動画を読み込めません。

&lt;/video&gt;
iframeタグは無効化されるので以下のソースは完全に消えます。
&lt;iframe src="//www.youtube.com/embed/○○○○○○○○○" width="560" height="314" allowfullscreen="allowfullscreen"&gt;&lt;/iframe&gt;

また、後に調べてみると、管理者権限でfunction.phpに以下を追記することで、「投稿者」でもiframeによる表示ができるようです。

/* フィルタの追加 */

add_filter('content_save_pre','test_save_pre');

function test_save_pre($content){
global $allowedposttags;

// iframeとiframeで使える属性を指定する
$allowedposttags['iframe'] = array('class' =&gt; array () , 'src'=&gt;array() , 'width'=&gt;array(),
'height'=&gt;array() , 'frameborder' =&gt; array() , 'scrolling'=&gt;array(),'marginheight'=&gt;array(),
'marginwidth'=&gt;array());

return $content;
}

私の場合は、管理者様にお願いして、権限を「投稿者」から「編集者」に昇格してもらうことで解決しました。