Custom Overlapping Video Card With Modal Video Player in Oxygen [FULL TUTORIAL]

In this tutorial, you'll learn how to create a custom overlapping video card that plays your video in a modal. This is perfect for situations where you want a super clean on-page presentation with the actual video playing in a lightbox on-click. Techniques you'll learn: – Creating a full screen section properly (Oxygen bug) – Using GRID to overlap elements – Using multi-layer box shadows. – Creating an interior border with ::after – Easily adding a pulsate animation to an icon – Creating an on-click modal with video embed – Adding a close icon to the modal Get my CSS utility class framework: https://automaticcss.com Join my Inner Circle: https://digitalambition.co/inner-circle/ Make sure you subscribe and hit the notification bell and drop a comment! Love hearing from you! 0:00 Intro 02:20 Example Design 04:20 Getting started 08:00 Creating the Grid 14:39 Creating the Cards 18:02 Adding the Play Icon 23:02 Adding the Pulsate Animation 24:55 Adding the 2-Layer Box Shadow 26:30 Adding the Red Inset Border 28:20 Adjusting the Overlap 30:00 Adding the Modal 31:32 Adding the Close Icon 35:03 Wrapping Up