Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
.button-video-cont { background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="36" height="72" viewBox="0 0 36 72"%3E%3Cg fill-rule="evenodd"%3E%3Cg fill="%239C92AC" fill-opacity="0.4"%3E%3Cpath d="M2 6h12L8 18 2 6zm18 36h12l-6 12-6-12z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E'); margin: 10vh; margin-left: 0; display: flex; flex-wrap: wrap; width: 100%; height: 100%; align-items: center; justify-content: space-evenly; video { background: #4bcc90; width: 800px; height: 80%; border-radius: 20px; padding: 20px; } .cardBox { height: 80%; z-index: 2; perspective: 800px; transition: all 0.5s ease 0s; .card { cursor: pointer; height: 100%; width: 100%; transform-style: preserve-3d; transition: transform 0.5s ease 0s; .front, .back { backface-visibility: hidden; box-sizing: border-box; color: white; display: flex; justify-content: center; align-items: center; font-size: 1.2em; height: 100%; position: absolute; text-align: center; width: 100%; span { background: linear-gradient( 0deg, rgba(34, 193, 195, 1) 0%, rgba(253, 187, 45, 1) 100% ); border-radius: 20px; font-size: 160px; margin: 0; } } .back { transform: rotateY(180deg); } } } }
import React, { useState, useRef } from "https://esm.sh/react@18"; import ReactDOM from "https://esm.sh/react-dom@18"; function Player({ videoRef }) { return (
); } function Card({ togglePlay }) { const [face, setFace] = useState("front"); const onRotate = (rotation) => { const selectedCard = document.querySelector(".card"); selectedCard.style.transform = rotation; }; const onChangeFace = () => { if (face === "front") { setFace("back"); onRotate("rotateY(180deg)"); } else { setFace("front"); onRotate("rotateY(-180deg)"); } togglePlay(); }; const iconButton = face === "front" ? (
play_circle
) : (
pause_circle
); return (
{iconButton}
{iconButton}
); } function App() { const [isPlaying, setIsPlaying] = useState(false); const videoRef = useRef(null); const togglePlay = () => { if (isPlaying) { videoRef.current.pause(); } else { videoRef.current.play(); } setIsPlaying(!isPlaying); }; return (
); } ReactDOM.render(
, document.getElementById("root"));