I'm trying to embed a Vimeo video on a mobile website. I want the users to see the Vimeo controls every time without scrolling in any direction. At the same time, the video needs to be centred (horizontally and vertically) on the screen.
Below is my current implementation, it is not working as expected.
<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>