How did YouTube create a fluid video player?

by

Here is a solution with only CSS:

.embed-container {
  position: relative;
  padding-bottom: 56.25%; /* 16x9 */
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.embed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0
}
<div class="embed-container">
  <iframe src="https://www.youtube.com/embed/C0DPdy98e4c"></iframe>
</div>

More Related Contents:

  1. JS hide function error
  2. Get the longest text in HTML document using Jquery or javascript
  3. Pure JavaScript toggle for select / deselect all checkboxes [duplicate]
  4. Javascript counting all the characters from a HTML document
  5. JSFiddle code not working in my own page
  6. How to disable scroll without hiding it?
  7. jQuery: Get selected element tag name
  8. How to dynamically create ‘@-Keyframe’ CSS animations?
  9. Infinity Loop Slider Concepts
  10. Text blinking jQuery
  11. jQuery jump or scroll to certain position, div or target on the page from button onclick [duplicate]
  12. jQuery vs document.querySelectorAll
  13. How to ONLY trigger parent click event when a child is clicked
  14. jQuery Validation using the class instead of the name value
  15. How can I detect when a new element has been added to the document in jquery?
  16. JavaScript Loading Screen while page loads
  17. Change text color based on brightness of the covered background area?
  18. jQuery – Sticky header that shrinks when scrolling down
  19. Show text letter by letter
  20. collapse and expand tabs jquery / simple accordion
  21. Large dynamically sized html table with a fixed scroll row and fixed scroll column
  22. Is it possible to do mathematics inside CSS?
  23. Select a row from html table and send values onclick of a button
  24. jQuery: Change element type from hidden to input
  25. Gaussian Blur onHover Using jQuery
  26. Wrapping lists into columns
  27. How to customize the position of an alert box
  28. Showing Placeholder text for password field in IE
  29. Possible to reverse a css animation on class removal?
  30. In jQuery mobile, what’s the diff between tap and vclick?

Leave a Comment