1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
<!DOCTYPE html><meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
margin: 0;
}
.container {
position: relative;
overflow: hidden;
width: 100vw;
height: 100vh;
}
.video {
position: absolute;
width: 100vw;
height: 100vh;
}
</style>
<div class="container"><div class="video" id="player"></div></div>
<script>
const url = new URL(window.location)
const viewport = document.querySelector("meta[name=viewport]")
const tag = document.createElement("script")
tag.src = "https://www.youtube.com/iframe_api"
const firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
let player
function onYouTubeIframeAPIReady() {
let videoId = url.searchParams.get('videoId')
videoId = decodeURIComponent(videoId)
videoId = videoId.replace(/[^a-zA-Z0-9_-]/g, "")
if (videoId.length !== 11) throw new Error("Invalid video ID")
let start = url.searchParams.get('start')
start = start.replace(/[^0-9]/g, "")
player = new YT.Player('player', {
width: "1000",
height: "1000",
videoId,
playerVars: {
autoplay: 1,
start,
rel: 0,
loop: 0,
playsinline: 1,
origin: url.origin
},
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
</script>
|
