项目作者: zachakbar

项目描述 :
Responsive video container for embed/object/iframe videos
高级语言: CSS
项目地址: git://github.com/zachakbar/video-wrapper.git
创建时间: 2017-03-15T15:47:26Z
项目社区:https://github.com/zachakbar/video-wrapper

开源协议:

下载


video-wrapper

Responsive video container for embed/object/iframe videos. This uses the bourbon mixins position & size.

  1. .video-wrapper {
  2. height: 0;
  3. overflow: hidden;
  4. padding-bottom: 56.25%; // 16:9
  5. //padding-bottom: 75%; // 4:3
  6. position: relative;
  7. embed,
  8. object,
  9. iframe {
  10. @include position(absolute, 0 null null 0);
  11. @include size(100%);
  12. }
  13. }

Example Usage:

  1. <div class="video-wrapper">
  2. <iframe src="https://player.vimeo.com/video/87110435?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  3. </div>