I’m new to web development and currently working on a video showcase page. I have a specific design in mind, but I’m facing some difficulties in implementing it. I’m feeling quite discouraged after struggling for the past three days.
Design Description:
A video showcase page with multiple videos. Each video project will have a looped and muted “Preview Video” that autoplays on the site (like a thumbnail). When the user clicks anywhere on the “Preview Video”, it disappears and a “Full Video” starts playing with audio. While the “Full Video” is playing, there will be an ‘X’ button displayed in the top right corner, functioning as a close button. Clicking the ‘X’ button will stop the “Full Video” and return to the “Preview Video”, simultaneously hiding the ‘X’ button.
How I Approached It:
For each section, I created a div box as the video holder. Within each video holder, I added two HTML embed elements. I used custom code to embed the preview video and full video within these embed elements. Additionally, I created a link box and placed a text box inside, labeling it as “X” to function as a close button.
However, when I tried running the JavaScript code provided by ChatGPT in my Project Settings - Custom Codes, it didn’t work as expected. Currently, I can only see the preview video, but when I click on it, the full video doesn’t appear as intended.
Implementation Request:
I need assistance in building this video showcase page. I have included three videos as examples on my read-only site. Please guide me through the process and provide the necessary code.
Here is my public share link: Webflow - video portfolio white