Is there any ways to play a youtube video when we hover over an image.I checked react-hover-video-player but couldnt play youtube videos.The video must be played in desired size when hovered on image.
You could try something like this:
YouTube probably requires this to be loaded from a server, and not just opened as an index.html file directly in the browser window.
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<img src="https://via.placeholder.com/150" id="image" alt="Placeholder image" />
<div id="youtube">
<iframe title="YouTube video player" frameborder="0" allowfullscreen></iframe>
</div>
<script>
const hoverable = document.querySelector('#image');
function showVideo() {
const video = document.querySelector('#youtube iframe');
video.src = 'https://www.youtube.com/embed/LatorN4P9aA';
video.style.width = '560px';
video.style.height = '315px';
video.allow ='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
hoverable.removeEventListener('mouseover', showVideo);
}
hoverable.addEventListener('mouseover', showVideo);
</script>
</body>
</html>