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

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

動画チュートリアル

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

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

まず、iframe動画埋め込みコードが含まれる投稿またはページを開く必要があります。典型的なiframe埋め込みコードは次のようになります。

このようにコードにインラインスタイルを追加することで、境界線を追加できます。

境界線の幅と色を変更するだけで完了です。

iframe境界線の追加は機能しますが、WordPressで動画の周りに境界線を追加する実際にはより良い方法があります。それはoEmbedを使用することです。

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

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

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

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

http://www.youtube.com/watch?v=qzOOy1tWBCg

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

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

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

oEmbed動画URLのspanタグにも、同じCSSクラスを使用できます。例：

http://www.youtube.com/watch?v=qzOOy1tWBCg

単一のCSSクラスを使用する利点は、後でテーマを変更した場合、各動画を個別に編集し直すのではなく、ワンクリックで簡単に色を変更できることです。

この記事が、WordPressで動画埋め込みのiframeボーダーを追加するのに役立ったことを願っています。また、動画でWordPressサイトを充実させるための、便利なYouTubeのヒント9選もご覧ください。

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