と悩んでいる人もいるでしょう。
そこで、この記事では下記の内容を解説します。
この記事で分かること
- YouTube 動画の角を丸くしてサイトに埋め込む方法
YouTube 動画をサイトに埋め込むとき、大きさやメニュバーの表示などは簡単に設定できるんですよね。
ただし、「角」は簡単に設定できません。
そこで、コードをちょこっと追加して YouTube 動画の角を丸くする方法をご紹介しましょう。
YouTube 動画の角を丸くさせる方法
YouTube 動画を埋め込むとき、「共有」からこの部分をコピーしてサイトに貼り付けるのが基本ですよね。
オトマミ
このコピーした部分を見てもらうと分かりますが、iframe の要素を使って YouTube が表示されています。
なので、この iframe をカスタマイズして動画の角を丸くしていきます。
CSS を追加して動画の角を丸く
シンプルに、iframe に対して角を丸くする設定をすると、YouTube 動画の角も丸くなります。
iframe { border-radius: 25px;
}
ただこれ、全ての iframe において角が丸くなります。
なので、サイトの雰囲気に合わせて SNS などの表示も丸くしたい場合に有効です。
オトマミ
YouTube 動画だけ角を丸く
YouTube 動画だけ角を丸くしたい場合は、YouTube からコピーしたコードに直接書き込む方法もあります。
コピーしたコードを一旦貼り付けて、
style="border-radius: 25px;"を追加します。
すると、こんな感じになっているはずです。
<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 動画の角を丸くした上で、枠線も付けることが簡単にできます。
先ほどのコードをそのまま使うと、赤い部分を追加すると枠線が表示されます。
style="border-radius: 20px;border:10px solid #ff0000"
すると、こんな感じで動画が表示されます。
ただの 1 本線で枠を表示させていますが、もし点線などに変更したい場合は下記を参考に solid の部分を変更してみてください。
- solid：1 本線
- double：2 本線
- dashed：破線
- dotted：点線
YouTube 動画もカスタマイズして表示してみよう
せっかく可愛らしいサイトなのに、YouTube の角がカクカクしていると雰囲気が台無しになってしまうこともありますからね。
カスタマイズ自体はとても簡単なので、YouTube 動画の表示も変えたいと思っていた人は、当記事を参考にして角を丸くしてみてください。
オトマミ