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

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

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