Created
January 24, 2023 10:37
-
-
Save guillefd/0ccdd17b88fb54c2c079171d7b772a30 to your computer and use it in GitHub Desktop.
Responsive Video Player - CSS and Markup
This file contains 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
| /* player CSS responsive 100% width */ | |
| .embed-container { | |
| position: relative; | |
| padding-bottom: 56.25%; | |
| height: 0; | |
| overflow: hidden; | |
| max-width: 100%; | |
| } | |
| .embed-container iframe, | |
| .embed-container object, | |
| .embed-container embed { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } |
This file contains 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
| <!-- markup para html video en Page --> | |
| <div class="embed-container"> | |
| <iframe src="https://www.youtube.com/embed/U9rov_rDlu8" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Tested with Vimeo and Youtube