JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<body>
<div id="video-id" onclick="inc()"></div>
<img src="" />
</body>
</html>
CSS
img {
max-width: 100%;
}
#video-id {
position: fixed;
width: 100px;
font-size: 24pt;
top: 5;
right: 0;
cursor: pointer;
}
JavaScript
img = document.querySelector('img')
n = 10562
img.src = `https://image.check.tv/lives/${n}/vertical.jpg`
id = document.querySelector('#video-id')
id.innerHTML = n
function render() {
url = `https://image.check.tv/lives/${n}/vertical.jpg`
img.src = url
id.innerHTML = n
}
function inc() { n++; render() }
function dec() { n--; render() }
document.body.addEventListener('keydown', (ev) => {
switch (ev.code) {
case 'ArrowLeft':
dec()
break;
case 'ArrowRight':
inc()
break
}
})