huncholanevideo section goes to full screen
huncholane2 files changed, +19 -3
+1-1twench_landing_page/components/VideoSection/VideoSection.css
| @@ -3,7 +3,7 @@ | ||
| 3 | 3 | } |
| 4 | 4 | |
| 5 | 5 | .VideoSection .Preview { |
| 6 | - @apply w-[290px] h-[175px] bg-black border-4 border-primary rounded-md left-1/2 absolute transform -rotate-12 -translate-y-1/2 -translate-x-1/2; | |
| 6 | + @apply w-[290px] h-[166px] bg-black border-4 border-primary rounded-md left-1/2 absolute transform -rotate-12 -translate-y-1/2 -translate-x-1/2 cursor-pointer; | |
| 7 | 7 | } |
| 8 | 8 | |
| 9 | 9 | .VideoSection .Preview button { |
+18-2twench_landing_page/components/VideoSection/VideoSection.tsx
| @@ -1,11 +1,27 @@ | ||
| 1 | -import React from "react"; | |
| 1 | +"use client"; | |
| 2 | +import React, { useRef } from "react"; | |
| 2 | 3 | import "./VideoSection.css"; |
| 3 | 4 | |
| 4 | 5 | const VideoSection: React.FC = () => { |
| 6 | + const videoRef = useRef<HTMLVideoElement>(null); | |
| 7 | + | |
| 8 | + const handleVideoClick = () => { | |
| 9 | + if (videoRef.current) { | |
| 10 | + if (videoRef.current.requestFullscreen) { | |
| 11 | + videoRef.current.requestFullscreen(); | |
| 12 | + } | |
| 13 | + } | |
| 14 | + }; | |
| 15 | + | |
| 5 | 16 | return ( |
| 6 | 17 | <div className="VideoSection"> |
| 7 | 18 | <div className="Preview"> |
| 8 | - <button></button> | |
| 19 | + <video | |
| 20 | + ref={videoRef} | |
| 21 | + src="/videos/v2.mp4" | |
| 22 | + controls | |
| 23 | + onClick={handleVideoClick} | |
| 24 | + ></video> | |
| 9 | 25 | </div> |
| 10 | 26 | </div> |
| 11 | 27 | ); |