pustakakoran

Youtube Responsive Embed

Oct 7th, 2017
73
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. CSS CODE:
  2.  
  3. .video-container {
  4. position: relative;
  5. padding-bottom: 56.25%;
  6. padding-top: 30px; height: 0; overflow: hidden;
  7. }
  8.  
  9. .video-container iframe,
  10. .video-container object,
  11. .video-container embed {
  12. position: absolute;
  13. top: 0;
  14. left: 0;
  15. width: 100%;
  16. height: 100%;
  17. }
  18.  
  19. Next, edit add some HTML around your embed code.
  20. HTML
  21.  
  22. <div class="video-container"><iframe width="853" height="480" src="https://www.youtube.com/embed/z9Ul9ccDOqE" frameborder="0" allowfullscreen</iframe</div>
  23.  
  24. Now, if the responsive YouTube embed worked, your videos should be responsive and ready to
RAW Paste Data