Black modal for cta video

components/home/HomeCTA.vue

@@ -12,10 +12,10 @@
       </div>
     </t-button>
 
-    <t-modal name="videoIntro" variant="large">
+    <t-modal name="videoIntro" variant="video">
       <div style="padding: 56.25% 0 0 0; position: relative">
         <iframe
-          src="https://player.vimeo.com/video/514975135?h=7f6183d68c&portrait=0"
+          src="https://player.vimeo.com/video/514975135?h=7f6183d68c&portrait=0&autoplay=1"
           style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"
           frameborder="0"
           allow="autoplay; fullscreen; picture-in-picture"

plugins/vue-tailwind.js

@@ -134,14 +134,14 @@ const settings = {
     props: {
       fixedClasses: {
         overlay:
-          'z-40  overflow-auto scrolling-touch left-0 top-0 bottom-0 right-0 w-full h-full fixed bg-opacity-50',
-        wrapper: 'relative mx-auto z-50 max-w-lg px-3 py-12',
-        modal: 'overflow-visible relative  rounded',
+          'flex items-center z-40 overflow-auto scrolling-touch left-0 top-0 bottom-0 right-0 w-full h-full fixed bg-opacity-50',
+        wrapper: 'w-full relative mx-auto z-50 max-w-lg px-3 py-12',
+        modal: 'overflow-visible relative rounded',
         body: 'p-3',
         header: 'border-b p-3 rounded-t',
         footer: ' p-3 rounded-b',
         close:
-          'flex items-center justify-center rounded-full absolute right-0 top-0 -m-3 h-8 w-8 transition duration-100 ease-in-out focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50',
+          'flex items-center justify-center rounded-full absolute right-0 top-0 -m-3 h-8 w-8 transition duration-100 ease-in-out focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 z-10',
       },
       classes: {
         overlay: 'bg-black',
@@ -173,6 +173,11 @@ const settings = {
             'border-b p-3 rounded-t text-xl font-bold dark:border-gray-500',
           footer: 'bg-gray-100 p-3 rounded-b dark:bg-gray-700',
         },
+        video: {
+          modal: 'bg-black shadow rounded',
+          wrapper: 'relative mx-auto z-50 max-w-4xl px-3 py-12',
+          close: 'bg-gray-700 text-gray-100 hover:bg-gray-600',
+        },
       },
     },
   },