Issue
I tried all the solutions posted on here however nothing seems to work. The start and pause button appears on IOS devices and possibly android. Below is my html and CSS regarding the video.
*::-webkit-media-controls-start-playback-button {
display: none!important;
-webkit-appearance: none;
}
#bg-video {
min-width: 100%;
min-height: 100vh;
max-width: 100%;
max-height: 100vh;
object-fit: cover;
z-index: -1;
display: none;
}
#bg-video::-webkit-media-controls {
display: none !important;
}
<section class="section main-banner" id="top" data-section="section1">
<video autoplay loop muted playsinline id="bg-video" controls="true" poster="assets/images/backvideo.png">
<source src="assets/images/course-video.mp4" type="video/mp4" />
<source src="assets/images/course-video.webm" type="video/webm" />
<source src="assets/images/course-video.ogv" type="video/ogv" />
</video>
Solution
<section class="section main-banner" id="top" data-section="section1">
<video autoplay loop muted playsinline id="bg-video" poster="assets/images/backvideo.png">
<source src="assets/images/course-video.mp4" type="video/mp4" />
<source src="assets/images/course-video.webm" type="video/webm" />
<source src="assets/images/course-video.ogv" type="video/ogv" />
</video>
Answered By - HackNetAyush
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.