Estuve trabajando en un mapa de Leaflet recientemente, y después de colocar un marcador emergente en el mapa, no pude incrustar correctamente un video mp4 en ese marcador.
El problema es que si bien incrusté el enlace al video en el marcador, el video no se reproducirá cuando abra el marcador emergente; solo muestra una imagen congelada. Me preguntaba si había una solución para que el video se reproduzca en este marcador emergente automáticamente una vez que se abre la ventana emergente.
<!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>