Building a Click-to-Load YouTube Video with JavaScript | Project Part 10

In this stream I worked on the Practice Layouts portfolio site with vanilla HTML, CSS, and JavaScript. The main focus was adding a featured video module to the project grid while keeping the JavaScript modular and avoiding repeated requests for the same `data.json` file. Along the way, I worked through a practical ES module refactor, compared default and named exports, used AI as a debugging and explanation partner, built dynamic DOM markup for a YouTube thumbnail and play button, and finished the click-to-load video interaction with CSS positioning and a fade transition. #html #css #javascript ✅ Topics covered: Fetching `data.json` once and passing data into modules Using default exports vs named exports Passing data into functions and understanding scope Dynamically creating article, figure, image, button, SVG, and iframe elements Building a click-to-load YouTube embed Avoiding iframe loading on page load Styling a responsive video container with absolute positioning Using `z-index`, `setTimeout`, and opacity transitions Saving markup snippets while working in vanilla JavaScript Planning load more, filtering, sidebar counts, forms, and deployment This video is for front-end developers who are learning vanilla JavaScript, ES modules, DOM rendering, or practical portfolio project architecture. Subscribe for more live coding with HTML, CSS, JavaScript, accessibility, deployment, and real-world frontend workflows. 🟣 REPO: https://github.com/angelajholden/prac... 🔵 CODE REVIEWS: https://angelajholden.com/consulting 🔵 EMAIL: [email protected] 🟢 SPONSOR: https://github.com/sponsors/angelajho... 🟢 DONATE: https://www.paypal.me/angelajholden 📚 Chapters 00:00:00 Starting Soon 00:01:36 Intro 00:06:50 Project Overview and Video Goal 00:11:11 Returning to Yesterday's Code 00:11:53 Refactoring Shared Data Fetching 00:28:03 Understanding ES Module Exports 00:36:49 Preparing the Video Snippet 00:42:12 Passing Data Into Functions 00:46:03 Learning Web Development Basics 00:54:36 Building the Video Markup 00:58:58 Adapting Click-To-Load Video 01:21:11 Creating Click-To-Load Behavior 01:35:52 Planning Remaining Project Work 01:40:39 Styling the Video Container 01:54:38 AI Lessons and Commit 01:56:33 Planning the Deployment Workflow