×

Welcome to TagMyCode

Please login or create account to add a snippet.
 

Elastic Vidoe - through CSS

0
0
 
0
Language: HTML
Posted by: Srinivasan Pusuluri
Added: Jun 17, 2014 10:50 AM
Views: 1822
Tags: css responsive video
  1. http://webdesignerwall.com/tutorials/css-elastic-videos
  2.  
  3. .video-container {
  4.         position: relative;
  5.         padding-bottom: 56.25%;
  6.         padding-top: 30px;
  7.         height: 0;
  8.         overflow: hidden;
  9. }
  10.  
  11. .video-container iframe,  
  12. .video-container object,  
  13. .video-container embed {
  14.         position: absolute;
  15.         top: 0;
  16.         left: 0;
  17.         width: 100%;
  18.         height: 100%;
  19. }
  20.  
  21. <div class="video-container">
  22.         <iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
  23. </div>
  24.  
  25. ---------------------------------------------
  26.  
  27. How to Create Fixed Width & Elastic
  28.  
  29. .video-wrapper {
  30.         width: 600px;
  31.         max-width: 100%;
  32. }
  33. HTML
  34. <div class="video-wrapper">
  35.         <div class="video-container">
  36.                 <iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
  37.         </div>
  38.         <!-- /video -->
  39. </div>
  40. <!-- /video-wrapper -->
  41.  

Write a comment

To post comments, please log in or register.