Modal Video with Alpine.js

Modal video component built with Alpine.js powered by zoom-in and zoom-out animations.

Share

/r/n <link rel=\"preconnect\" href=https://www.creative-tim.com/"https:////fonts.gstatic.com/" crossorigin>\r\n <link href=https://www.creative-tim.com/"https:////fonts.googleapis.com//css2?family=Inter:wght@400;500&display=swap\%22 rel=\"stylesheet\">\r\n <script defer src=https://www.creative-tim.com/"https:////cdn.jsdelivr.net//npm//alpinejs@3.x.x//dist//cdn.min.js/">/r/n/r/n/r/n/r/n <div class=\"relative font-inter antialiased\">\r\n <main class=\"relative min-h-screen flex flex-col justify-center bg-slate-50 overflow-hidden\">\r\n <div class=\"w-full max-w-6xl mx-auto px-4 md:px-6 py-24\">\r\n <div class=\"flex justify-center\">\r\n\r\n \r\n <div class=\"[&_[x-cloak]]:hidden\" x-data=\"{ modalOpen: false }\">\r\n \r\n \r\n <button class=\"relative flex justify-center items-center focus:outline-none focus-visible:ring focus-visible:ring-indigo-300 rounded-3xl group\" @click=\"modalOpen = true\" aria-controls=\"modal\" aria-label=\"Watch the video\">\r\n <img class=\"rounded-3xl shadow-2xl transition-shadow duration-300 ease-in-out\" src=https://www.creative-tim.com/"https:////cruip-tutorials.vercel.app//modal-video//modal-video-thumb.jpg/" width=\"768\" height=\"432\" alt=\"Modal video thumbnail\" \/>\r\n \r\n <svg class=\"absolute pointer-events-none group-hover:scale-110 transition-transform duration-300 ease-in-out\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"72\" height=\"72\">\r\n <circle class=\"fill-white\" cx=\"36\" cy=\"36\" r=\"36\" fill-opacity=\".8\" \/>\r\n <path class=\"fill-indigo-500 drop-shadow-2xl\" d=\"M44 36a.999.999 0 0 0-.427-.82l-10-7A1 1 0 0 0 32 29V43a.999.999 0 0 0 1.573.82l10-7A.995.995 0 0 0 44 36V36c0 .001 0 .001 0 0Z\" \/>\r\n <\/svg>\r\n <\/button>\r\n \r\n \r\n \r\n <div\r\n class=\"fixed inset-0 z-[99999] bg-black bg-opacity-50 transition-opacity\"\r\n x-show=\"modalOpen\"\r\n x-transition:enter=\"transition ease-out duration-200\"\r\n x-transition:enter-start=\"opacity-0\"\r\n x-transition:enter-end=\"opacity-100\"\r\n x-transition:leave=\"transition ease-out duration-100\"\r\n x-transition:leave-start=\"opacity-100\"\r\n x-transition:leave-end=\"opacity-0\" \r\n aria-hidden=\"true\"\r\n x-cloak\r\n ><\/div>\r\n \r\n \r\n \r\n <div\r\n id=\"modal\"\r\n class=\"fixed inset-0 z-[99999] flex px-4 md:px-6 py-6\"\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n x-show=\"modalOpen\"\r\n x-transition:enter=\"transition ease-out duration-300\"\r\n x-transition:enter-start=\"opacity-0 scale-75\"\r\n x-transition:enter-end=\"opacity-100 scale-100\"\r\n x-transition:leave=\"transition ease-out duration-200\"\r\n x-transition:leave-start=\"opacity-100 scale-100\"\r\n x-transition:leave-end=\"opacity-0 scale-75\"\r\n x-cloak\r\n >\r\n <div class=\"max-w-5xl mx-auto h-full flex items-center\">\r\n <div class=\"w-full max-h-full rounded-3xl shadow-2xl aspect-video bg-black overflow-hidden\" @click.outside=\"modalOpen = false\" @keydown.escape.window=\"modalOpen = false\">\r\n <video x-init=\"$watch('modalOpen', value => value ? $el.play() : $el.pause())\" width=\"1920\" height=\"1080\" loop controls>\r\n <source src=https://www.creative-tim.com/"https:////cruip-tutorials.vercel.app//modal-video//video.mp4/" type=\"video\/mp4\" \/>\r\n Your browser does not support the video tag.\r\n <\/video>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <\/div>\r\n \r\n\r\n <\/div>\r\n <\/div>\r\n <\/main>\r\n <\/div>\r\n<\/body>\r\n\r\n<\/html>","author_type":"App\\User","author_id":5888,"collection_id":null,"fork_id":null,"votes":4,"score":"5.0","visits":3390,"popularity":435,"slug":"modal-video-with-alpinejs","approved":1,"created_at":"2024-02-23T00:00:00.000000Z","updated_at":"2024-09-19T02:29:02.000000Z","downloads":67,"code_views":1012,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":0,"media":[{"id":11641,"model_type":"App\\Component","model_id":6382,"collection_name":"preview","name":"temp46412","file_name":"temp46412.png","mime_type":"image\/png","disk":"public","size":235362,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp46412___media_library_original_1280_957.png","temp46412___media_library_original_1070_800.png","temp46412___media_library_original_895_669.png","temp46412___media_library_original_749_560.png","temp46412___media_library_original_627_469.png","temp46412___media_library_original_524_392.png","temp46412___media_library_original_439_328.png","temp46412___media_library_original_367_274.png","temp46412___media_library_original_307_230.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FHQUFnQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEE1cGIwQzdXSnVBeDYwNTFWQjJOS1ZCMUZkSG9lay9ESzcxZTFTYUJ3eXNNMVNxSm1NcWJpN00xMCtDV29zdVMxVnpJamxPZThWL0QrNjhNUUNTWTVCcHFWeE5XUFBaTG1FWHlSdGpjVFhCaUUyejE4SkpSUjlLZkRHOGp0OUZpVjVWSEhjMVZOV1JoWGFjajBHSFZJQ29IbnArZGEzT1U4MCtOMTFGTnBxQkhWdm9hMWdSSSthZFMwV1c1dWhORkpzWVZUaW1LTTNFMExXOTF5elFMSGZNcWpzRFM1RURtMlcxMS94Q25UVUgvT2prUXVZYzJyYXJlL0xlWExUTDZFMVNWaE4zUC8yUT09Ij4KCTwvaW1hZ2U+Cjwvc3ZnPg=="}},"order_column":3,"created_at":"2024-02-29T12:52:56.000000Z","updated_at":"2024-02-29T12:52:58.000000Z","conversions_disk":"public","uuid":"faaa7443-2534-4d31-97cd-c4f84965555d","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/11641\/temp46412.png","preview_url":""}],"author":{"id":5888,"name":"Pasquale Vitiello","slug":"pasquale-vitiello","bio":"Crafting UIs with Tailwind CSS. Behind Cruip\r\n and other cool projects.\r\nhttps:\/\/cruip.com https:\/\/saaslandingpage.com https:\/\/saasinterface.com","avatar":"\/storage\/avatars\/EDrC5X3fQiJWevFCJoBsHH6oEuOnPBN0A8VLKsEx.jpg","header":null,"created_at":"2021-11-23T16:51:57.000000Z","updated_at":"2024-02-23T12:06:56.000000Z"},"tags":[{"id":10,"name":{"en":"Modals"},"description":"Choose from our extensive collection of responsive modals to create dialogs, popovers, light boxes, and so on. Show interactive information to your website users using these Tailwind snippets.","meta_description":"Choose from our extensive collection of responsive modals to create dialogs, popovers, light boxes, and so on.","slug":{"en":"modals"},"type":null,"order_column":8,"created_at":"2020-09-29T11:20:03.000000Z","updated_at":"2022-08-01T16:22:07.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":6382,"tag_id":10}},{"id":92,"name":{"en":"Video"},"description":"Utilize the video component to set up an embedded video player by leveraging native HTML 5 functionalities, all crafted with the utility classes provided by Tailwind CSS.","meta_description":"Utilize the video component to set up an embedded video player by leveraging native HTML 5 functionalities, all crafted with the utility classes provided by Tailwind CSS.","slug":{"en":"video"},"type":null,"order_column":81,"created_at":"2023-11-14T17:08:02.000000Z","updated_at":"2023-11-14T17:08:02.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":6382,"tag_id":92}}],"fork":null,"favorites":[{"id":6940,"name":"123ApplePie","slug":"123applepie","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/73269263?v=4","header":null,"created_at":"2022-02-21T13:49:46.000000Z","updated_at":"2022-02-21T13:49:46.000000Z","pivot":{"component_id":6382,"user_id":6940}},{"id":17619,"name":"AnthonyLadon","slug":"anthonyladon","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/112899558?v=4","header":null,"created_at":"2024-03-16T14:29:48.000000Z","updated_at":"2024-03-16T14:29:48.000000Z","pivot":{"component_id":6382,"user_id":17619}},{"id":14819,"name":"pig4cloud","slug":"pig4cloud","bio":null,"avatar":"https:\/\/pbs.twimg.com\/profile_images\/1275609899385319430\/huNqFDlg_normal.jpg","header":null,"created_at":"2023-10-22T17:10:10.000000Z","updated_at":"2023-10-22T17:10:10.000000Z","pivot":{"component_id":6382,"user_id":14819}},{"id":12321,"name":"Arun Kumar","slug":"arun-kumar","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/e645688c8afb052a14811b90242a47a9","header":null,"created_at":"2023-05-11T19:57:25.000000Z","updated_at":"2023-05-11T19:58:46.000000Z","pivot":{"component_id":6382,"user_id":12321}},{"id":17664,"name":"Yonghwa Choi","slug":"yonghwa-choi","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/b5e79380c35b10bef79ad43885d636fe","header":null,"created_at":"2024-03-18T13:00:42.000000Z","updated_at":"2024-03-18T13:00:42.000000Z","pivot":{"component_id":6382,"user_id":17664}},{"id":3038,"name":"lohnsonok","slug":"lohnsonok","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/60504466?v=4","header":null,"created_at":"2021-04-11T20:40:20.000000Z","updated_at":"2021-04-11T20:40:20.000000Z","pivot":{"component_id":6382,"user_id":3038}},{"id":17617,"name":"SidakVats","slug":"sidakvats","bio":"SIDAK","avatar":"https:\/\/avatars.githubusercontent.com\/u\/120305006?v=4","header":null,"created_at":"2024-03-16T12:49:27.000000Z","updated_at":"2024-03-26T11:36:31.000000Z","pivot":{"component_id":6382,"user_id":17617}},{"id":17386,"name":"FernyCastro8","slug":"fernycastro8","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/124219457?v=4","header":null,"created_at":"2024-03-06T05:46:07.000000Z","updated_at":"2024-03-06T05:46:07.000000Z","pivot":{"component_id":6382,"user_id":17386}},{"id":2235,"name":"david-forer","slug":"david-forer","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/29668345?v=4","header":null,"created_at":"2021-02-13T12:51:39.000000Z","updated_at":"2021-02-13T12:51:39.000000Z","pivot":{"component_id":6382,"user_id":2235}},{"id":19227,"name":"EvanSux","slug":"evansux","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/40912417?v=4","header":null,"created_at":"2024-06-07T00:19:42.000000Z","updated_at":"2024-06-07T00:19:42.000000Z","pivot":{"component_id":6382,"user_id":19227}}]}" :edit="false"> Full screen Preview

Pasquale Vitiello

6 components

Modal Video with Alpine.js

Community Rate

Related components