seems to work. runs very slowly.

src/features/posts/Post.css

@@ -64,6 +64,19 @@ img, video {
     color: rgb(97, 49, 95);
 }
 
+.gallery-statement {
+    color: rgb(228, 180, 226);
+}
+
+.gallery-statement a {
+    color: white;
+    text-decoration: none;
+}
+
+.gallery-statement a:active {
+    color:rgb(97, 49, 95);
+}
+
 .num-comments {
     display: inline-flex;
     background-color: #7196be;

src/features/posts/Post.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 // import { useDispatch } from "react-redux";
 import Discussion from "../discussion/Discussion";
+import VideoPlayer from "../video/VideoPlayer";
 import './Post.css';
 
 export default function Post({data, key}) {
@@ -14,11 +15,6 @@ export default function Post({data, key}) {
     let media = data.post_hint === 'image' && data.url;
     let permalink = data.permalink;
     let selftext = data.selftext;
-    let video = data.is_video ? `${data.url}/DASH_1080.mp4` : null;       // to do: handle media edge cases, especially video
-
-    // fallback_url: "https://v.redd.it/0rditq5l49g81/DASH_1080.mp4?source=fallback"
-    // url: "https://v.redd.it/0rditq5l49g81"
-    // id: "sm2wym"
 
     const limit = 300;
     const [body, setBody] = useState(selftext);
@@ -90,6 +86,10 @@ export default function Post({data, key}) {
             return;
         }
     }
+
+    // Render function below:
+    // Each is preceded by a conditional so the program does not throw an error
+    // before the fetch requests' promises are fulfilled.
     
     return (
         <>
@@ -99,17 +99,16 @@ export default function Post({data, key}) {
                 <a className="title" href={`https://reddit.com${permalink}`}>{title}</a>
             : <p>[untitled]</p>}
 
-            {media ? <img alt={title} src={media} /> : ''}
+            {media ? <img alt={title} src={media} /> : null}
-            {data.crosspost_parent_list ? handleCrosspost() : ''}
+
+            {data.crosspost_parent_list ? handleCrosspost() : null}
 
             {data.gallery_data ?
-                <p>View the gallery of photos corresponding to this post <a href={data.url}>here</a>.</p>
+                <p className="gallery-statement">View the gallery of photos corresponding to this post <a href={data.url}>here</a>.</p>
             : null}
 
             {data.is_video ?
-                <video controls poster={data.thumbnail} preload="auto" src={`${data.url}/DASH_audio.mp4`} type="video/mp4">
+                <VideoPlayer data={data} />
-                    Your video is not supported by the browser.
-                </video>
             : null}
 
             {body ?

src/features/video/VideoPlayer.js

@@ -1,30 +1,33 @@
-import { useState, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
 
 export default function VideoPlayer({data}) {
-    let playerVideo = useRef();
+    const vid = useRef();
-    let playerAudio = useRef();
+    const aud = useRef();
-    const [playing, setPlaying] = useState(false);
+
+    const vidPosition = useRef(0);
+    const audPosition = useRef(0);
 
     let url = data.url ? data.url : null;
+    const [playing, setPlaying] = useState(false);
 
-    const handlePlay = () => {
+    useEffect(() => {
-        setPlaying(true);
-
         if (playing) {
-            playerAudio.current.currentTime = playerVideo.current.currentTime;
+            aud.current.play();
-            setPlaying(false);
+            vid.current.currentTime = aud.current.currentTime;
+        } else if (!playing) {
+            aud.current.pause();
         }
-    }
+    }, [playing, aud, vid]);
-
-    const handlePause = () => {
-        playerAudio.current.pause();
-        setPlaying(false);
-    }
 
     return (
         <div className="video-player">
-            <video ref={playerVideo.current} src={`${url}/DASH_1080.mp4`} onPlay={handlePlay} onPause={handlePause}></video>
+            <video ref={vid} controls onPlay={() => setPlaying(true)} onPause={() => setPlaying(false)} src={`${url}/DASH_1080.mp4`}>
-            <audio ref={playerAudio.current} className="audio-hidden" src={`${url}/DASH_audio.mp4`} type="audio/mp4"></audio>
+                This video is not supported by your browser.
+            </video>
+            <video ref={aud} controls autoPlay={() => playing ? true : false} src={`${url}/DASH_audio.mp4`}>
+                This video is not supported by your browser.
+            </video>
+            <h1 style={{'color': 'white'}}>{playing.toString()}</h1>
         </div>
     );
 }