Merge pull request #1593 from tinacms/style-updates-2

fix video
tinacms · Jun 29, 2023 · 4bb6faa · 4bb6faa
2 parents 0e16ac4 + 98c29b1
commit 4bb6faa
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 20 deletions.
diff --git a/components/blocks/Hero.template.ts b/components/blocks/Hero.template.ts
@@ -30,7 +30,13 @@ export const heroTemplate: TinaTemplate = {
     { name: 'text', label: 'Text', type: 'string' },
     // @ts-ignore
     actionsTemplate,
-    { name: 'videoSrc', label: 'Video Source', type: 'string' },
+    {
+      name: 'videoSrc',
+      label: 'Video Source',
+      description:
+        'This is the Cloudinary Public ID, for example "tina-io/docs/quick-edit-demo".',
+      type: 'string',
+    },
     {
       name: 'margin',
       description: 'Default is px-8 py-12 lg:py-16',

diff --git a/components/blocks/Hero.tsx b/components/blocks/Hero.tsx
@@ -10,24 +10,22 @@ export function HeroBlock({ data, index }) {
       }`}
     >
       <Container width="narrow" center>
-        <HeroFeature item={data} spacing={data.spacing} />
+        <HeroFeature item={data} spacing={data.spacing}>
+          {data.videoSrc && <Video src={data.videoSrc} />}
+        </HeroFeature>
       </Container>
-      {data.videoSrc && (
-        <Container>
-          <Video src={data.videoSrc} />
-        </Container>
-      )}
     </section>
   )
 }
 
-export const HeroFeature = ({ item, spacing }) => {
+export const HeroFeature = ({ item, spacing, children }) => {
   return (
     <>
       <div className={`flex flex-col ${spacing ? spacing : 'gap-6'}`}>
         {item.headline && <h2 className="heading">{item.headline}</h2>}
         {item.text && <p className="text-xl">{item.text}</p>}
         {item.actions && <Actions items={item.actions} align="center" />}
+        {children}
       </div>
       <style jsx>{`
         .heading {
@@ -76,31 +74,27 @@ export const Video = ({ src }) => {
         poster={`https://res.cloudinary.com/forestry-demo/video/upload/so_0/${src}.jpg`}
       >
         <source
-          src={`https://res.cloudinary.com/forestry-demo/video/upload/q_100,h_584/${src}.webm`}
+          src={`https://res.cloudinary.com/forestry-demo/video/upload/q_80,h_562/${src}.webm`}
           type="video/webm"
         />
         <source
-          src={`https://res.cloudinary.com/forestry-demo/video/upload/q_80,h_584/${src}.mp4`}
+          src={`https://res.cloudinary.com/forestry-demo/video/upload/q_80,h_562/${src}.mp4`}
           type="video/mp4"
         />
       </video>
       <style jsx>{`
         .video {
-          width: 100%;
+          position: relative;
+          left: 50%;
+          transform: translateX(-50%);
+          width: calc(100vw - 2rem);
+          max-width: 1000px;
+          margin: 1.5rem 0;
           border-radius: 0.5rem;
           box-shadow: inset 0 0 0 1px rgba(236, 72, 21, 0.03),
             0 6px 24px rgba(0, 37, 91, 0.05), 0 2px 4px rgba(0, 37, 91, 0.03);
           display: flex;
           justify-content: center;
-
-          @media (min-width: 1100px) {
-            width: 90%;
-            margin: 0 auto;
-          }
-
-          @media (min-width: 1400px) {
-            width: 80%;
-          }
         }
       `}</style>
     </>