動画埋め込みのiframe境界線の追加方法

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

動画チュートリアル

動画が気に入らなかった場合や、さらに詳しい説明が必要な場合は、読み進めてください。

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対応サイトでのみ機能します。（参照：oEmbedを使用してWordPressに簡単に動画を追加する方法）

oEmbedで動画を追加する方法がわかったので、WordPressでoEmbed動画の周りに境界線を追加する方法を説明します。

oEmbedを使用して動画を追加する場合、URLをspanタグで囲み、インラインスタイルパラメータを使用するだけです。例：

<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選もご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでもフォローできます。