Document
Featured Video
How To Get Good At Photography
const video = document.querySelector(".video");
const videoPlayer = document.querySelector(".video .videoPlayer");
const closeBtn = document.querySelector(".video .close-btn");
const playVideo = (videoUrl) => {
if (document.pictureInPictureElement == null) {
video.classList.add("active");
}
videoPlayer.src = videoUrl;
}
closeBtn.addEventListener("click", () => {
video.classList.remove("active");
videoPlayer.pause();
})
videoPlayer.addEventListener("enterpictureinpicture", () => {
video.classList.remove("active");
})
videoPlayer.addEventListener("leavepictureinpicture", () => {
video.classList.add("active");
})
Footer
© 2022 GitHub, Inc.
Footer navigation
Terms
Privacy
Security
St
.video-gallery {
font-family: "Raleway", sans-serif;
width: 600px;
padding: 0 32px;
margin: 0 auto;
box-sizing: border-box;
}
.video-gallery img {
width: 100%;
}
.video-gallery h2 {
font-size: 40px;
font-weight: 800;
margin: 0;
padding: 16px 0;
color: #303030;
}
.video-gallery h2.related-videos-title {
display: none;
}
.video-gallery .featured-video .video-card {
position: relative;
}
.video-gallery .featured-video .video-card .play-icon {
position: absolute;
top: 50%;
left: 50%;
width: 60px;
transform: translate(-50%, -50%);
}
.video-gallery .featured-video .video-card h3 {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 16px 32px;
background: linear-gradient(0deg, #000 0%, #000 33%, rgba(0, 0, 0, 0) 100%);
margin: 0;
color: #fff;
}
.video-gallery .related-videos {
display: flex;
gap: 8px;
margin-top: 24px;
}
.video-gallery .related-videos .thumbnail {
position: relative;
}
.video-gallery .related-videos .thumbnail .play-icon {
position: absolute;
top: 50%;
left: 50%;
width: 40px;
transform: translate(-50%, -50%);
}
.video-gallery .related-videos .video-card h3 {
padding: 0 16px;
font-size: 16px;
line-height: 1.5;
color: #fff;
}
.video-gallery .related-videos .video-card {
background-image: linear-gradient( 135deg, #0856af 10%, #0a5d64 100%);
}
.video-card {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 16px -6px rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.video {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100vh;
display: none;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.8);
font-family: "Raleway", sans-serif;
}
.video.active {
display: flex;
z-index: 1000;
}
.video .videoPlayer {
width: 70vw;
}
.video .close-btn {
position: absolute;
top: 32px;
right: 32px;
font-size: 64px;
background: white;
padding: 0 12px;
border-radius: 50%;
line-height: 0.8;
cursor: pointer;
transform: rotateZ(45deg);
}
@media (max-width: 700px) {
.video-gallery {
width: 100%;
padding: 0px 16px;
}
.video .videoPlayer {
width: 100vw;
}
}
@media (max-width: 550px) {
.video-gallery .related-videos {
flex-direction: column;
margin-top: 0;
}
.video-gallery .related-videos .video-card {
margin: 8px 0;
}
.video-gallery h2.related-videos-title {
display: block;
margin-top: 32px;
}
}
