Resolve image paths relative to script URL for CDN support

Updated to use jsdelivr URLs

.gitattributes

@@ -0,0 +1,4 @@
+index.html export-ignore
+README.md export-ignore
+sbs-video.mp4 export-ignore
+poster.jpg export-ignore

README.md

@@ -4,10 +4,9 @@ A web-based video player for 180 degree, 3D video.
 Got an immersive video you want people to see with the Apple Vision Pro or Meta Quest headsets? Now you can put it on your website just like any other video! People will see the immersive 3D video if they have a capable headset or they'll get a 2D version on other devices.
 
 ## How to use it
-1. Drop the `vr180player` directory in the root level of your website.
+1. Link to the player CSS file `<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Verdi/VR180-Web-Player@v1.0.1/vr180player/vr180-player.css">`.
-2. Link to the player CSS file `<link rel="stylesheet" href="vr180player/vr180-player.css">`.
+2. Add the player script `<script type="module" src="https://cdn.jsdelivr.net/gh/Verdi/VR180-Web-Player@v1.0.1/vr180player/vr180-player.js"></script>` before the closing body tag.
-3. Add the player script `<script type="module" src="vr180player/vr180-player.js"></script>` before the closing body tag.
+3. And use this HTML snippet to embed your video: 
-4. And use this HTML snippet to embed your video: 
 ```
 <div id="vr-container">
 	<video id="vr180" poster="poster.jpg" title="Demo Video" crossOrigin="anonymous" playsinline>

index.html

@@ -4,7 +4,7 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 	<title>VR180 Web Player</title>
-	<link rel="stylesheet" href="vr180player/vr180-player.css">
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Verdi/VR180-Web-Player@v1.0.1/vr180player/vr180-player.css">
 	<style>
         body {
 		  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -28,6 +28,6 @@
 			<!-- UI elements will be dynamically inserted here by JavaScript -->
 		</div>
 	</main>
-	<script type="module" src="vr180player/vr180-player.js"></script>
+	<script type="module" src="https://cdn.jsdelivr.net/gh/Verdi/VR180-Web-Player@v1.0.1/vr180player/vr180-player.js"></script>
 </body>
 </html>

vr180player/vr180-player.js

@@ -1,4 +1,5 @@
 import * as THREE from 'https://unpkg.com/three/build/three.module.js';
+const _playerBase = new URL('.', import.meta.url).href;
 
 let scene, camera, renderer, video, videoTexture, sphereMaterial;
 let vr180Mesh;
@@ -111,7 +112,7 @@ function createPlayButton() {
 	playButton.setAttribute('aria-label', 'Play video');
 	
 	const playImg = document.createElement('img');
-	playImg.src = 'vr180player/images/play.png';
+	playImg.src = _playerBase + 'images/play.png';
 	playImg.alt = 'Play';
 	
 	playButton.appendChild(playImg);