I've been working on a Leaflet map recently, and after putting in a popup marker on the map, I have been unable to properly embed a mp4 video in that marker.
The issue is that while I have embedded the link to the video in the marker, the video won't play when you open the popup marker; it just shows a frozen image. I was wondering if there was a workaround to get the video to play in this popup marker automatically once the popup is opened.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<style>
#map { height: 800px; }
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script>
var map = L.map('map').setView([27.2, 84], 4);
var Esri_NatGeoWorldMap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — National Geographic, Esri, DeLorme, NAVTEQ, UNEP-WCMC, USGS, NASA, ESA, METI, NRCAN, GEBCO, NOAA, iPC',
maxZoom: 16
}).addTo(map);
var marker = L.marker([27.2,83.95],{draggable: true, title:"Hello", opacity: 0.5}).addTo(map).bindPopup('<h1>Marker</h1><video> <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"></video>').openPopup();
</script>
</body>
</html>