Created
December 7, 2023 14:02
-
-
Save fwalzel/3a2a77feba570dc3732f92a0d86b7ed0 to your computer and use it in GitHub Desktop.
Embed scaling Html5 Video with constrained proportions, autoplaying
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Embed scaling Video, constraied proportions</title> | |
| </head> | |
| <body> | |
| <div style="width: 100%; position: relative;"> | |
| <div style="padding-bottom: calc(100% * 720 / 1280); position: relative;"> | |
| <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent;"> | |
| <video id="videocontainer" style="padding: 0; margin: 0; width: 100%; height: 100%; display: block;" autoplay muted playsinline> | |
| <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4"> | |
| Your browser does not support the video. | |
| </video> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.getElementById('videocontainer').play(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment