自己解決しました。
フルスクリーンにしたとき、画面サイズが16/9になることで、(以下の)両方の処理が適応されていました。
@media (aspect-ratio: 16/9), (min-aspect-ratio: 16/9) {
video {
width: 100%;
top: 50%;
transform: translateY(-50%);
}
}
@media (max-aspect-ratio: 16/9) {
video {
height: 100%;
left: 50%;
transform: translateX(-50%);
}
}
ですので、上記コードの下に
@media (aspect-ratio: 16/9) {
video {
top: 0%;
}
}
と追記するか頭に!important
を付けて以下の様に書くことで該当の問題は発生しなくなりました。
@media (aspect-ratio: 16/9) {
video {
top: 0% !important;
}
}
@media (min-aspect-ratio: 16/9) {
video {
width: 100%;
top: 50%;
transform: translateY(-50%);
}
}
@media (max-aspect-ratio: 16/9) {
video {
height: 100%;
left: 50%;
transform: translateX(-50%);
}
}
回答を下さりありがとうございました。また、お騒がせしてしまいすみませんでした。