Estoy tratando de incrustar un video de Vimeo en un sitio web móvil. Quiero que los usuarios vean los controles de Vimeo todo el tiempo sin desplazarse en ninguna dirección. Al mismo tiempo, el video debe estar centrado (horizontal y verticalmente) en la pantalla.
A continuación se muestra mi implementación actual, no funciona como se esperaba.
<html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1 user-scalable=0 minimum-scale=1"> <style> .embed-responsive-item { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; } </style> </head> <body style="background-color:green"> <div class="embed-responsive embed-responsive-16by9"> <div id="video" style="background-color:red" class="embed-responsive-item"></div> </div> <script id="vimeo" async src="https://player.vimeo.com/api/player.js"></script> <script> function loadVimeoVideo() { var options = { id: '253989945', transparent: 1, } var player = new Vimeo.Player('video', options) } var script = document.querySelector('#vimeo'); script.addEventListener('load', function () { loadVimeoVideo(); }); </script> </body> </html>