Hotfix video loading speeds

components/layouts/Section.jsx

@@ -3,10 +3,12 @@ import VideoButton from "../buttons/VideoButton.jsx";
 
 function Section({
   videoUrl,
+  videoUrlWeb,
   text,
   headingLevel = 1,
   buttonVideoURL,
   buttonOneText,
+  posterPath,
 }) {
   const videoRef = useRef(null);
   const [isPlaying, setIsPlaying] = useState(false);
@@ -38,16 +40,21 @@ function Section({
   const Heading = `h${headingLevel}`;
 
   return (
-    <div className="relative z-10 h-screen w-screen">
+    <div className="relative z-10 h-screen w-screen bg-black">
       <video
         className="absolute h-screen w-screen object-cover blur-sm"
-        src={videoUrl}
+        poster={posterPath}
         ref={videoRef}
         muted
         autoPlay
         loop
         preload="metadata"
-      />
+        controls
+      >
+        <source src={videoUrlWeb} type="video/webm" />
+        <source src={videoUrl} type="video/mp4" />
+        Your browser does not support the video tag.
+      </video>
       <div className="relative z-10 flex flex-col items-center justify-center h-full">
         <div className="flex flex-col items-center space-y-4">
           <Heading className="lg:text-5xl md:text-4xl sm:text-3xl text-3xl text-center text-white break-normal">

pages/about.js

@@ -24,7 +24,9 @@ export default function Home() {
 
       <Section
         key="aboutSection0"
-        videoUrl="/about2.mp4"
+        videoUrlWeb="/about.webm"
+        videoUrl="/about.mp4"
+        posterPath="/about.png"
         text="about"
         buttonTwoText="say hello"
         buttonLink="#contact"
@@ -32,13 +34,13 @@ export default function Home() {
         buttonVideoURL="https://odysee.com/@shilohcode:e/about:11"
       ></Section>
       <SectionTwo
-        text="Our Creed"
+        text="our creed"
         buttonText="explore"
         buttonLink="https://creed.shilohcode.com"
       ></SectionTwo>
       <ContactFormSection
         text="contact us"
-        buttonText="contact us"
+        buttonText="copy email"
         email="hello-izmqxby3qjkffhh6w7a9s2j3qwj7zu93iji7gxjcn@shilohcode.com"
       />
     </>

pages/contactus.js

@@ -21,7 +21,7 @@ export default function Home() {
       <Navbar />
       <ContactFormSection
         text="contact us"
-        buttonText="contact us"
+        buttonText="copy email"
         email="hello-izmqxby3qjkffhh6w7a9s2j3qwj7zu93iji7gxjcn@shilohcode.com"
       />
     </>

pages/getinvolved.js

@@ -14,7 +14,9 @@ export default function Home() {
       <Navbar />
       <Section
         key="getInvolved0"
+        videoUrlWeb="get-involved.webm"
         videoUrl="/get-involved.mp4"
+        posterPath="/get-involved.png"
         text="get involved"
         buttonLink="#contact"
         buttonTwoText="say hello"
@@ -44,7 +46,7 @@ export default function Home() {
 
       <ContactFormSection
         text="contact us"
-        buttonText="contact us"
+        buttonText="copy email"
         email="hello-izmqxby3qjkffhh6w7a9s2j3qwj7zu93iji7gxjcn@shilohcode.com"
       />
     </>

pages/index.js

@@ -25,7 +25,9 @@ export default function Home() {
       <Navbar />
       <Section
         key="section0"
+        videoUrlWeb="/main.webm"
         videoUrl="/main.mp4"
+        posterPath="/main.png"
         text="tech reform in Jesus' name"
         buttonTwoText="learn more"
         buttonOneText="watch"
@@ -35,7 +37,9 @@ export default function Home() {
       />
       <Section
         key="section1"
-        videoUrl="/about2.mp4"
+        videoUrlWeb="/about.webm"
+        videoUrl="/about.mp4"
+        posterPath="/about.png"
         text="about"
         buttonOneText="watch"
         buttonTwoText="learn more"
@@ -45,7 +49,9 @@ export default function Home() {
       />
       <Section
         key="section2"
+        videoUrlWeb="get-involved.webm"
         videoUrl="/get-involved.mp4"
+        posterPath="/get-involved.png"
         text="get involved"
         buttonOneText="watch"
         buttonTwoText="learn more"
@@ -55,7 +61,7 @@ export default function Home() {
       />
       <ContactFormSection
         text="contact us"
-        buttonText="contact us"
+        buttonText="copy email"
         email="hello-izmqxby3qjkffhh6w7a9s2j3qwj7zu93iji7gxjcn@shilohcode.com"
       />
     </>