Webサイト内に入れた動画のまわりに、なんか枠がつく…
videoタグで動画を設置した際に勝手につく枠線の消し方をメモしておきます。
今回、全体的に白っぽいWebサイトの背景部分に、白色ベースの動画を配置するデザインを制作していたのですが、動画の端の部分にグレーの線がついてしまっていました。
動画に色がついていたり、ただ動画を載せるだけならあまり関係ないかもしれませんが、今回は背景と動画を馴染ませたかった為、線が入ると困ります。
しかも、デバイスなどの環境によって線が表示されたりされなかったり…
環境によってデフォルトで線が表示されてしまうんですね。
解決方法は？
下記のCSSを追加するだけで解決できました。
video {
filter: drop-shadow(0px 0px rgba(0,0,0,0));
}
枠線の設定(?)に干渉するのかな…？
動画に枠線がついていると困る場合は、念のためこのCSSを入れておいた方が良さそうです。