埋め込み動画の周囲に iframe の枠線を追加する方法

埋め込み動画の周りにiframeの枠線を追加したいですか？最近、ユーザーから WordPress で動画の周りに枠線を追加する方法を尋ねられました。WordPressで動画を追加するには、iframeとoEmbedの両方を使用することができますので、WordPressでoEmbedの動画の周りに枠線を追加する方法と同様に、動画埋め込みの周りにiframeの枠線を追加する方法を紹介します。

動画チュートリアル

動画が気に入らなかったり、もっと説明が必要な場合は、このまま読み進めてください。

WordPressでiframe動画の周りに枠線を追加する

まず最初に行うべきことは、iframe動画の埋め込みコードを含む投稿またはページを開くことです。典型的なiframe埋め込みコードは以下のようなものです：

<iframe width="560" height="315" src="https://www.youtube.com/embed/qzOOy1tWBCg" frameborder="0" allowfullscreen></iframe> のようになります。

このようなコードにインラインスタイルを追加することで、枠線を追加することができます：

<iframe style="border：3px solid #EEE;" width="560" height="315" src="https://www.youtube.com/embed/qzOOy1tWBCg" frameborder="0" allowfullscreen></iframe>のように、インラインスタイルを追加することができます。

枠線の幅と色を変えるだけで完了です。

iframe枠線の追加も有効ですが、実はWordPressで動画の周りに枠線を追加するもっと良い方法があります。それはoEmbedを使うことです。

WordPressでoEmbed動画の周りに枠線を追加する

WordPressはビルトインでoEmbedをサポートしています。基本的にWordPressは、動画のリンクを貼り付けると、自動的に埋め込みコードを取得します。この機能は、YouTube、Vimeo、DailyMotion、Huluなど、oEmbedが有効化されたサイトでのみ動作します（参照：WordPressでoEmbedを使って簡単に動画を追加する方法）。

oEmbedを使って動画を追加する方法がわかったところで、WordPressでoEmbed動画の周りに枠線を追加する方法を紹介します。

oEmbedを使って動画を追加する場合、次のようにインラインスタイルのパラメータを持つspanタグでURLを囲むだけです：

<span style="border:3px solid #EEE;">http://www.youtube.com/watch?v=qzOOy1tWBCg</span>.

すべての動画iframeの周りに同じ枠線を追加したい場合は、テーマのスタイルシートにCSSクラスを追加するのが最善です。

.frame-border { 
border:3px solid #EEE; 
}

これで、iframe 埋め込みコードで CSS クラスを次のように使用できます：

<iframe class="frame-border" width="560" height="315" src="https://www.youtube.com/embed/qzOOy1tWBCg" frameborder="0" allowfullscreen></iframe> のように。

また、oEmbed の動画 URL を囲む span タグにも、同じ CSS クラスを次のように使用できます：

<span class="frame-border">http://www.youtube.com/watch?v=qzOOy1tWBCg</span> のようにします。

個別 CSS クラスを使用する利点は、後でテーマを変更する場合、ワンクリックで簡単に色を変更できることです。

この投稿が、WordPress の動画埋め込みに iframe の枠線を追加するのにお役に立てば幸いです。WordPressサイトを動画で彩るYouTubeの9つの便利なTipsもご覧ください。

この投稿を気に入っていただけたなら、WordPressの動画チュートリアルをYouTubeチャンネルに登録してください。Twitterや Facebookでもご覧いただけます。