【YouTube のサイト埋め込み】動画の角を丸くして表示させる方法【枠線も付けてカスタマイズ】

YouTube 動画をサイトに埋め込むと角がカクカクになるけど、角を丸くして表示させる方法はないかな…

 

と悩んでいる人もいるでしょう。

そこで、この記事では下記の内容を解説します。

この記事で分かること

  • YouTube 動画の角を丸くしてサイトに埋め込む方法

 

YouTube 動画をサイトに埋め込むとき、大きさやメニュバーの表示などは簡単に設定できるんですよね。

ただし、「角」は簡単に設定できません。

そこで、コードをちょこっと追加して YouTube 動画の角を丸くする方法をご紹介しましょう。

YouTube 動画の角を丸くさせる方法

YouTube 動画を埋め込むとき、「共有」からこの部分をコピーしてサイトに貼り付けるのが基本ですよね。

オトマミ

テーマによっては、リンクまたは ID のみを貼り付ければ表示されるショートコードがあったりします。

 

このコピーした部分を見てもらうと分かりますが、iframe の要素を使って YouTube が表示されています。

なので、この iframe をカスタマイズして動画の角を丸くしていきます。

 

CSS を追加して動画の角を丸く

シンプルに、iframe に対して角を丸くする設定をすると、YouTube 動画の角も丸くなります。

CSS

iframe { border-radius: 25px;
}

 

ただこれ、全ての iframe において角が丸くなります。

なので、サイトの雰囲気に合わせて SNS などの表示も丸くしたい場合に有効です。

オトマミ

デフォルトを 25px にしていますが、角の丸さ加減を調整したい場合は数字を変更してください。

 

YouTube 動画だけ角を丸く

YouTube 動画だけ角を丸くしたい場合は、YouTube からコピーしたコードに直接書き込む方法もあります。
 

コピーしたコードを一旦貼り付けて、

HTML

style="border-radius: 25px;"

を追加します。
 

すると、こんな感じになっているはずです。

HTML

<iframe style="border-radius: 25px;" width="560" height="315" src="https://www.youtube.com/embed/IO212sfQaEQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

すると、角が丸い YouTube 動画が表示されます。

枠線も付ける

YouTube 動画の角を丸くした上で、枠線も付けることが簡単にできます。

先ほどのコードをそのまま使うと、赤い部分を追加すると枠線が表示されます。

HTML

style="border-radius: 20px;border:10px solid #ff0000"

 

すると、こんな感じで動画が表示されます。

 

ただの 1 本線で枠を表示させていますが、もし点線などに変更したい場合は下記を参考に solid の部分を変更してみてください。

  • solid:1 本線
  • double:2 本線
  • dashed:破線
  • dotted:点線

YouTube 動画もカスタマイズして表示してみよう

せっかく可愛らしいサイトなのに、YouTube の角がカクカクしていると雰囲気が台無しになってしまうこともありますからね。

カスタマイズ自体はとても簡単なので、YouTube 動画の表示も変えたいと思っていた人は、当記事を参考にして角を丸くしてみてください。

オトマミ

YouTube も上手くカスタマイズして、サイトの雰囲気作りをしてみましょう!