You are here

Home » API reference » URL to Video Filter 8

url_to_video_embed.css in URL to Video Filter 8

Same filename and directory in other branches
  1. 2.0.x css/url_to_video_embed.css
.url-to-video-container {
  display: inline-block;
  margin: 20px auto;
  width: 100%;
}
.url-to-video-container:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.url-to-video-container.no-js {
  border: solid black 1px;
}
.url-to-video-container.no-js .loader {
  background: url(../images/no-js.png) no-repeat center center;
  background-size: 40px 40px;
}
.url-to-video-container.no-js .url-to-video-player {
  cursor: auto;
}
.url-to-video-container .loader {
  vertical-align: middle;
  display: inline-block;
  background: #FFF url(../images/ajax-loader.gif) no-repeat center center;
}
.url-to-video-container .url-to-video-player {
  /* assuming that the video has a 16:9 ratio */
  padding-bottom: 56.25%;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.url-to-video-container .url-to-video-player .player-thumb {
  background-position: center center;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.url-to-video-container .url-to-video-player .play-button {
  height: 40px;
  width: 40px;
  display: block;
  background: url(../images/play-button.png) no-repeat center center;
  background-size: 40px 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.url-to-video-container .player-iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/*# sourceMappingURL=url_to_video_embed.css.map */

File

css/url_to_video_embed.css
View source 
  1. .url-to-video-container {

  2.   display: inline-block;

  3.   margin: 20px auto;

  4.   width: 100%;

  5. }

  6. .url-to-video-container:before {

  7.   content: "";

  8.   display: inline-block;

  9.   height: 100%;

  10.   vertical-align: middle;

  11. }

  12. .url-to-video-container.no-js {

  13.   border: solid black 1px;

  14. }

  15. .url-to-video-container.no-js .loader {

  16.   background: url(../images/no-js.png) no-repeat center center;

  17.   background-size: 40px 40px;

  18. }

  19. .url-to-video-container.no-js .url-to-video-player {

  20.   cursor: auto;

  21. }

  22. .url-to-video-container .loader {

  23.   vertical-align: middle;

  24.   display: inline-block;

  25.   background: #FFF url(../images/ajax-loader.gif) no-repeat center center;

  26. }

  27. .url-to-video-container .url-to-video-player {

  28.   /* assuming that the video has a 16:9 ratio */

  29.   padding-bottom: 56.25%;

  30.   overflow: hidden;

  31.   position: relative;

  32.   width: 100%;

  33.   height: 100%;

  34.   cursor: pointer;

  35. }

  36. .url-to-video-container .url-to-video-player .player-thumb {

  37.   background-position: center center;

  38.   background-size: cover;

  39.   position: absolute;

  40.   top: 0;

  41.   left: 0;

  42.   width: 100%;

  43.   height: 100%;

  44.   cursor: pointer;

  45. }

  46. .url-to-video-container .url-to-video-player .play-button {

  47.   height: 40px;

  48.   width: 40px;

  49.   display: block;

  50.   background: url(../images/play-button.png) no-repeat center center;

  51.   background-size: 40px 40px;

  52.   position: absolute;

  53.   top: 50%;

  54.   left: 50%;

  55.   transform: translate(-50%, -50%);

  56.   cursor: pointer;

  57. }

  58. .url-to-video-container .player-iframe {

  59.   width: 100%;

  60.   height: 100%;

  61.   position: absolute;

  62.   top: 0;

  63.   left: 0;

  64. }

  65. 

  66. /*# sourceMappingURL=url_to_video_embed.css.map */