Autoplay doesn't work

jaltekruse · Feb 8, 2023 · 78b25e0 · 78b25e0
1 parent 136f048
commit 78b25e0
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 33 deletions.
diff --git a/src/Media/homepagevideo.mp4 b/src/Media/homepagevideo.mp4
diff --git a/src/Tools/_framework/ToolPanels/HomePanel.jsx b/src/Tools/_framework/ToolPanels/HomePanel.jsx
@@ -22,41 +22,8 @@ const DoenetLogo = styled.div`
   justify-content: center;
   align-items: center;
 `;
-const DoenetImage = styled.img`
-@media (max-width: 768px) {
-  width:500px;
-}
-
-&:focus {
-  outline: 2px solid var(--mainBlue);
-  outline-offset: 2px;
-}
-`;
-
-const SectionDiv = styled.div`
-  background-color: var(--canvas);
-  color: var(--canvastext);
-  padding: 20px 10px 60px 10px;
-  margin: 0px;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-`;
 
 
-
-const CloudColor = styled.div`
-  background-color: var(--canvas);
-  color: var(--canvastext);
-`;
-const CloudColorSection = styled(CloudColor)`
-  padding: 20px 10px 60px 10px;
-  margin: 0px;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-`;
-
 const LightBlueColor = styled.div`
 background-color: var(--lightBlue);
 color: black;
@@ -196,6 +163,27 @@ export default function HomePage(props) {
     </div>
 
     <Heading heading="Create Content" subheading="Authors can quickly create interactive activities" />
+
+    <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: '500px',
+      background: '#333333'
+    }}>
+
+      <video
+        height='420px'
+        src='/media/homepagevideo.mp4'
+        loop
+        muted
+        autoplay
+        controls
+      />
+
+    </div>
+
     <Heading heading="Explore" subheading="Interact with our existing content" />
     <LightBlueColorSection>
       <SectionText>