Recently, I embedded a video:
<video preload muted autoplay loop id="sty">
<source src="content/1/sty.mp4" type="video/mp4">
</video>
To make this video full-width, I made sure to set the CSS properties for width and height to 100%:
* {
overflow: hidden;
}
video {
height: 100%;
width: 100%;
}
This eliminated any scrolling, as I only wanted the video visible (hence the use of overflow: hidden). My next goal is to overlay some buttons (displayed using [svg] images) on top of the video. These buttons would allow users to like the video, share it, and access more information about it. Ideally, I'd like them positioned at the bottom-left side of the video, similar to TikTok's layout:
Unfortunately, I have been struggling to achieve this in a responsive and functioning manner.
Does anyone have a code snippet that successfully overlays three buttons on the left side of a video, just like in the provided screenshot?
Many thanks