src/features/posts/Post.css

@@ -97,10 +97,14 @@ img, video {
 
 .video-player {
     display: inline-flex;
+    flex-direction: column;
+    align-items: center;
 }
 
-.post-audio, .post-video {
-    position: absolute;
+#post-audio {
+    position: relative;
+    height: 3.5rem;
+    width: 60%;
 }
 
 /* Handles comment styles on toggle */

src/features/video/VideoPlayer.js

@@ -5,14 +5,28 @@ export default function VideoPlayer({data, src}) {
     const aud = useRef();        // identifies location of video/audio in DOM
     
     const [playing, setPlaying] = useState(false);      // handles play/pause logic
-
+    const [error, setError] = useState(null);
+    
     const crossPostSrc = src;
 
     let url = crossPostSrc ? crossPostSrc :             // sets video source according to applicable
         (data.url ? data.url : null);                   // location within reddit response
 
-    useEffect(() => {                   // synchronizes play/pause between two components
-        if (playing) {                  // according to section of state
+
+    useEffect(() => {
+        const req = new XMLHttpRequest();
+        req.open('HEAD', `${url}/DASH_audio.mp4`, true);
+        req.send();
+        if (req.status === 404) {
+            setError(true);
+        }
+        if (req.status === 403) {
+            setError(true);
+        }
+    }, [url]);
+
+    useEffect(() => {                         // synchronizes play/pause between two components
+        if (playing) {                        // according to section of state
             vid.current.play();
             vid.current.currentTime = aud.current.currentTime;
         } else if (!playing) {
@@ -22,12 +36,27 @@ export default function VideoPlayer({data, src}) {
 
     return (
         <div className="video-player">
-            <video id="post-video" ref={vid} autoPlay={() => playing ? true : false} src={`${url}/DASH_1080.mp4`}>
-                This video is not supported by your browser.
-            </video>
-            <video id="post-audio" ref={aud} controls onPlay={() => setPlaying(true)} onPause={() => setPlaying(false)} src={`${url}/DASH_audio.mp4`}>
-                This video is not supported by your browser.
-            </video>
+
+            {
+                !error ? 
+
+                <>
+                <video id="post-video" ref={vid} autoPlay={playing ? true : false} src={`${url}/DASH_1080.mp4`}>
+                    This video is not supported by your browser.
+                </video>
+                <video id="post-audio" ref={aud} controls onPlay={() => setPlaying(true)} onPause={() => setPlaying(false)} src={`${url}/DASH_audio.mp4`}>
+                    This video is not supported by your browser.
+                </video>
+                </>
+
+                :
+
+                <video id="post-video" ref={vid} controls src={`${url}/DASH_1080.mp4`}>
+                    This video is not supported by your browser.
+                </video>
+
+
+            }
         </div>
     );
 }