fix: maintain video aspect ratio using padding-bottom technique

This commit is contained in:
Paul Gauthier (aider) 2025-03-19 13:59:06 -07:00
parent 5349c99c74
commit 3a3bc9898d

View file

@ -189,15 +189,24 @@ nav {
.video-container {
max-width: 800px;
width: 100%;
margin: 0 auto;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
border-radius: 8px;
overflow: hidden;
aspect-ratio: 2656 / 2160;
position: relative;
height: 0;
/* Calculate exact padding-bottom based on aspect ratio: (2160/2656) × 100% */
padding-bottom: calc(2160 / 2656 * 100%);
background-color: #f5f5f5; /* Light background while video loads */
}
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
}