Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-09-05 17:53:12 +02:00
Code Issues Projects Releases Wiki Activity

fix: responsible video

Browse Source
This commit is contained in:
FredrikOseberg 2025-08-14 14:47:35 +02:00
parent 36db02d4ab
commit e0274782a5
No known key found for this signature in database
GPG Key ID: 282FD8A6D8F9BCF0
2 changed files with 38 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
website/src/components/VideoContent.jsx
View File

@ -35,11 +35,12 @@ const LazyVideo = ({ url, title = 'YouTube video player' }) => {
role='button' role='button'
tabIndex={0} tabIndex={0}
aria-label={`Load ${title}`} aria-label={`Load ${title}`}
style={{ width: '414px', height: '232px' }}
> >
{/* Play button overlay */} {/* Play button overlay */}
<img <img
className={styles.thumbnailImage}
src={`https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`} src={`https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`}
alt={`${title} thumbnail`}
fetchPriority='high' fetchPriority='high'
/> />
<div className={styles.playButton}> <div className={styles.playButton}>
@ -61,16 +62,16 @@ const LazyVideo = ({ url, title = 'YouTube video player' }) => {
} }
return ( return (
<iframe <div className={styles.videoWrapper}>
className={styles.loadedVideo} <iframe
width='100%' className={styles.loadedVideo}
height='315' src={`${url}${url.includes('?') ? '&' : '?'}autoplay=1`}
src={`${url}${url.includes('?') ? '&' : '?'}autoplay=1`} title={title}
title={title} allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' allowFullScreen
allowFullScreen loading='lazy'
loading='lazy' />
/> </div>
); );
}; };

31
website/src/components/VideoContent.module.css
View File

@ -3,8 +3,6 @@
position: relative; position: relative;
width: 100%; width: 100%;
padding-bottom: 56.25%; /* 16:9 aspect ratio */ padding-bottom: 56.25%; /* 16:9 aspect ratio */
background-size: cover;
background-position: center;
cursor: pointer; cursor: pointer;
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
@ -12,6 +10,15 @@
transition: transform 0.2s ease, box-shadow 0.2s ease; transition: transform 0.2s ease, box-shadow 0.2s ease;
} }
.thumbnailImage {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.videoThumbnail:hover { .videoThumbnail:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
@ -56,12 +63,26 @@
flex-direction: column; flex-direction: column;
gap: 1.5rem; gap: 1.5rem;
margin: 1rem 0; margin: 1rem 0;
width: 100%;
max-width: 100%;
}
.videoWrapper {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
} }
.loadedVideo { .loadedVideo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none; border: none;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
} }
/* Dark mode adjustments */ /* Dark mode adjustments */
@ -92,7 +113,7 @@
} }
/* Animation for smooth loading */ /* Animation for smooth loading */
.loadedVideo { .videoWrapper {
animation: fadeInScale 0.3s ease-out; animation: fadeInScale 0.3s ease-out;
} }