diff --git a/src/VideoPlayer.jsx b/src/VideoPlayer.jsx
new file mode 100644
index 0000000..05c3dd7
--- /dev/null
+++ b/src/VideoPlayer.jsx
@@ -0,0 +1,43 @@
+import { h, render, Component } from "preact";
+//import React from "react";
+import Hls from "hls.js";
+import PortfolioVideo from "../static/video/index.m3u8";
+export default class VideoPlayer extends Component {
+  state = {};
+  //  componentDidUpdate() {
+  componentDidMount() {
+    const video = this.player;
+    const url = PortfolioVideo; //"https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8";
+    if (Hls.isSupported()) {
+      const hls = new Hls();
+
+      hls.loadSource(url);
+      hls.attachMedia(video);
+      hls.on(Hls.Events.MANIFEST_PARSED, function () {
+        video.play();
+      });
+    } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
+      video.src = url;
+      video.addEventListener("loadedmetadata", function () {
+        video.play();
+      });
+    }
+  }
+  render() {
+    return (
+      <video
+        style={{
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+        }}
+        loop
+        muted
+        className="videoCanvas"
+        ref={(player) => (this.player = player)}
+        autoPlay={true}
+      />
+    );
+  }
+}
diff --git a/static/video/index.m3u8 b/static/video/index.m3u8
new file mode 100644
index 0000000..be04a10
--- /dev/null
+++ b/static/video/index.m3u8
@@ -0,0 +1,19 @@
+#EXTM3U
+#EXT-X-VERSION:3
+#EXT-X-TARGETDURATION:17
+#EXT-X-MEDIA-SEQUENCE:0
+#EXTINF:11.233333,
+index0.ts
+#EXTINF:9.466667,
+index1.ts
+#EXTINF:16.666667,
+index2.ts
+#EXTINF:8.333333,
+index3.ts
+#EXTINF:8.333333,
+index4.ts
+#EXTINF:6.433333,
+index5.ts
+#EXTINF:0.200000,
+index6.ts
+#EXT-X-ENDLIST
diff --git a/static/video/index0.ts b/static/video/index0.ts
new file mode 100644
index 0000000..aab6564
Binary files /dev/null and b/static/video/index0.ts differ
diff --git a/static/video/index1.ts b/static/video/index1.ts
new file mode 100644
index 0000000..bec9614
Binary files /dev/null and b/static/video/index1.ts differ
diff --git a/static/video/index2.ts b/static/video/index2.ts
new file mode 100644
index 0000000..e5b5b5c
Binary files /dev/null and b/static/video/index2.ts differ
diff --git a/static/video/index3.ts b/static/video/index3.ts
new file mode 100644
index 0000000..eb25fd4
Binary files /dev/null and b/static/video/index3.ts differ
diff --git a/static/video/index4.ts b/static/video/index4.ts
new file mode 100644
index 0000000..217caee
Binary files /dev/null and b/static/video/index4.ts differ
diff --git a/static/video/index5.ts b/static/video/index5.ts
new file mode 100644
index 0000000..b6d1f54
Binary files /dev/null and b/static/video/index5.ts differ
diff --git a/static/video/index6.ts b/static/video/index6.ts
new file mode 100644
index 0000000..63dcb6d
Binary files /dev/null and b/static/video/index6.ts differ