The question is "can video play without controls?" The answer is it depends on the device and what browser settings people use. If autoplay is disabled by the user and there are no player controls, your users won't be able to view your video. Also many devices will ignore autoplay when the video volume is not muted.
This code works for most people no matter which devices they have.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Video Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--Bootstrap 4.5 on CDN-->
<link rel="stylesheet" href="
https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<style>
body {
margin: 0;
background: #222;
}
/**style play button over the video**/
.video-wrapper { position: relative; }
.video-wrapper > video {
width: 100%;
vertical-align: middle;
}
.video-wrapper > video.has-media-controls-hidden::-webkit-media-controls {
display: none;
}
.video-overlay-play-button {
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 10px calc(50% - 50px);
position: absolute;
top: 0;
left: 0;
display: block;
opacity: 0.95;
cursor: pointer;
background-image: linear-gradient(transparent, #000);
transition: opacity 150ms;
}
.video-overlay-play-button:hover { opacity: 1; }
.video-overlay-play-button.is-hidden { display: none; }
</style>
</head>
<body>
<header>
<div class="video-wrapper">
<!--CHANGE POSTER IMAGE AND VIDEO TO YOUR OWN-->
<video poster="https://source.unsplash.com/XT5OInaElMw/1600x900" muted="muted" loop="loop" >
<source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4">
</video>
</div>
</header>
<nav id="topNav" class="navbar navbar-top navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand mx-auto" href="index.html">
<!--Your logo goes here-->
<img class="shadow-sm rounded-circle" src="https://dummyimage.com/250x110" alt="logo/brand">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="navbar-toggler-icon"></span></button>
<div class="navbar-collapse collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item current">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">sub-1a</a>
<a class="dropdown-item" href="#">sub-1b</a>
<a class="dropdown-item" href="#">sub-1c</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron jumbotron-fluid text-center">
<h1 class="display-5">Bootstrap 4.5 with Dreamweaver</h1>
<p class="lead">Easily build your page using the Bootstrap components from the Insert panel.</p>
<hr class="my-4">
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p class="lead">
<a class="btn btn-dark btn-lg" href="https://getbootstrap.com/docs/4.0/components/jumbotron/" role="button">Learn more</a>
</p>
</div>
<div class="container-fluid">
<div class="row text-center text-light">
<div class="col-md-6 col-lg-3">
<h3>Heading 3</h3>
<img class="img-fluid" src="https://dummyimage.com/900x600" alt="placeholder">
<p>Lorem ipsum dolor...</p>
</div>
<div class="col-md-6 col-lg-3">
<h3>Heading 3</h3>
<img class="img-fluid" src="https://dummyimage.com/900x600" alt="placeholder">
<p>Lorem ipsum dolor...</p>
</div>
<div class="col-md-6 col-lg-3">
<h3>Heading 3</h3>
<img class="img-fluid" src="https://dummyimage.com/900x600" alt="placeholder">
<p>Lorem ipsum dolor...</p>
</div>
<div class="col-md-6 col-lg-3">
<h3>Heading 3</h3>
<img class="img-fluid" src="https://dummyimage.com/900x600" alt="placeholder">
<p>Lorem ipsum dolor...</p>
</div>
</div>
<hr class="my-4">
<div class="row">
<footer class="col">
<small>© 2021 Footer goes here</small>
</footer>
</div>
</div>
<script>
//Invoke the play button on load
var videoPlayButton,
videoWrapper = document.getElementsByClassName('video-wrapper')[0],
video = document.getElementsByTagName('video')[0],
videoMethods = {
renderVideoPlayButton: function() {
if (videoWrapper.contains(video)) {
this.formatVideoPlayButton()
video.classList.add('has-media-controls-hidden')
videoPlayButton = document.getElementsByClassName('video-overlay-play-button')[0]
videoPlayButton.addEventListener('click', this.hideVideoPlayButton)
}
},
formatVideoPlayButton: function() {
videoWrapper.insertAdjacentHTML('beforeend', '\
<svg class="video-overlay-play-button" viewBox="0 0 200 200" alt="Play video">\
<circle cx="100" cy="100" r="90" fill="none" stroke-width="15" stroke="#fff"/>\
<polygon points="70, 55 70, 145 145, 100" fill="#fff"/>\
</svg>\
')
},
hideVideoPlayButton: function() {
video.play()
videoPlayButton.classList.add('is-hidden')
video.classList.remove('has-media-controls-hidden')
video.setAttribute('controls', 'controls')
}
}
videoMethods.renderVideoPlayButton()
</script>
<!--Supporting scripts: first jQuery, then popper, then Bootstrap JS, etc...-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>
I hope that helps.
Nancy O'Shea— Product User, Community Expert & Moderator
1
Reply
AdChoices