YTPlayer.css 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. /*
  2. * ******************************************************************************
  3. * jquery.mb.components
  4. * file: YTPlayer.css
  5. *
  6. * Copyright (c) 2001-2013. Matteo Bicocchi (Pupunzi);
  7. * Open lab srl, Firenze - Italy
  8. * email: matteo@open-lab.com
  9. * site: http://pupunzi.com
  10. * blog: http://pupunzi.open-lab.com
  11. * http://open-lab.com
  12. *
  13. * Licences: MIT, GPL
  14. * http://www.opensource.org/licenses/mit-license.php
  15. * http://www.gnu.org/licenses/gpl.html
  16. *
  17. * last modified: 23/11/13 21.05
  18. * *****************************************************************************
  19. */
  20. /*
  21. * jQuery.mb.components: mb.YTVPlayer
  22. * © 2001 - 2012 Matteo Bicocchi (pupunzi), Open Lab
  23. *
  24. */
  25. @charset"UTF-8";
  26. /* Generated by Font Squirrel (http://www.fontsquirrel.com) on May 30, 2013 */
  27. @font-face {
  28. font-family: 'ytpregular';
  29. src: url('ytp-regular.eot');
  30. }
  31. @font-face {
  32. font-family: 'ytpregular';
  33. src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAA5sABEAAAAAFCAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABgAAAABwAAAAcZ9iuNUdERUYAAAGcAAAAHQAAACAAdAAET1MvMgAAAbwAAABJAAAAYHUMUrFjbWFwAAACCAAAAKkAAAGKn5XycWN2dCAAAAK0AAAANgAAADYNLQohZnBnbQAAAuwAAAGxAAACZVO0L6dnYXNwAAAEoAAAAAgAAAAIAAAAEGdseWYAAASoAAAGVQAAB4jz86dSaGVhZAAACwAAAAAzAAAANgbKONpoaGVhAAALNAAAACAAAAAkESQLXGhtdHgAAAtUAAAAVAAAARxOmwVwbG9jYQAAC6gAAAAjAAAAkFoEXRRtYXhwAAALzAAAACAAAAAgAWoB625hbWUAAAvsAAAA+wAAAeok3Eb+cG9zdAAADOgAAADAAAABN99tv1lwcmVwAAANqAAAALkAAAFY3I6ikndlYmYAAA5kAAAABgAAAAbHMlGnAAAAAQAAAADMPaLPAAAAAM3Nk7QAAAAAzc13sXjaY2BkYGDgA2IJBhBgYmAEQjcgZgHzGAAHTAB5AAAAeNpjYGbZwDiBgZWBhdWY5SwDA8MsCM10liGNKQ3IB0rBASMDEgj1DvdjcGDgfcDAlvYPqJJVldEZpoZVkuUZkFJgYAQAUUULewAAAHjaY2BgYGaAYBkGRgYQaAHyGMF8FoYMIC3GIAAUYQOyeBkUGKIYqhgWKHAp6CvEP2D4/x+sAyTuyJAIFGeAizP+//r/8f/D//f+n/HA8oHo/WcKblDzsQBGoOkwSUYmIMGErgDiRLyAhZWNnYOTi5uHl49fQFBIWERUTFxCUkpaRhYiLyevoKikrKKqpq6hqaWto6unb2BoZGxiambOQF1gQZYuAIQnH4IAAAAAAAAAAAABegEnAHEAswC9AOAA5QD+ARcBIwBdAHIBtgBcAGAAZgByAI8AogErAbIAUwBEBREAAHjaXVG7TltBEN0NDwOBxNggOdoUs5mQxnuhBQnE1Y1iZDuF5QhpN3KRi3EBH0CBRA3arxmgoaRImwYhF0h8Qj4hEjNriKI0Ozuzc86ZM0vKkap36WvPU+ckkMLdBs02/U5ItbMA96Tr642MtIMHWmxm9Mp1+/4LBpvRlDtqAOU9bykPGU07gVq0p/7R/AqG+/wf8zsYtDTT9NQ6CekhBOabcUuD7xnNussP+oLV4WIwMKSYpuIuP6ZS/rc052rLsLWR0byDMxH5yTRAU2ttBJr+1CHV83EUS5DLprE2mJiy/iQTwYXJdFVTtcz42sFdsrPoYIMqzYEH2MNWeQweDg8mFNK3JMosDRH2YqvECBGTHAo55dzJ/qRA+UgSxrxJSjvjhrUGxpHXwKA2T7P/PJtNbW8dwvhZHMF3vxlLOvjIhtoYEWI7YimACURCRlX5hhrPvSwG5FL7z0CUgOXxj3+dCLTu2EQ8l7V1DjFWCHp+29zyy4q7VrnOi0J3b6pqqNIpzftezr7HA54eC8NBY8Gbz/v+SoH6PCyuNGgOBEN6N3r/orXqiKu8Fz6yJ9O/sVoAAAAAAQAB//8AD3jaTZVrbBxXFcfvufNe72Nmdx77tmfHO2N76117784OTr154YAbR7RQuUQhttoSuXZKFQVKKYqgiFJAgkpIkVClIn8opSomjXY3VHHTFldEIYpay1hR+ID4Bha27FoIEQGpd8Idu4lY7c6eOfee//2f3+zeizAaQwif4iYRgwRUbgGqjLYFNvVxtcVzfxltM5iGqMUEaS5ItwU+vTPahiBPFFMpmoo5hnv8XnjFn+Um7/xmjF1GCLHoPf+fgsUVEYcSKIcGkYbaWYxKLZ3bgGa50qpACQ0NeyYoYILaDTqpurUK2FZBUYlJY8ukEc0egLpbo+kY8O/BQcx2dvwP2Fh6/Q+Gl19fyroubHmer7rpjHllPZ/NKB+tp2/4/TzxSx0zo/74uUY29vJZOEHIfng4lzz7cjyXzn/jJwqCwCOLdj2iPSP3F/hUAHF3v+Cviee5DIqhJDLRACLoPGpHECq1M7Sd5iDZ/W6zQW8mu9Ecql7SI6xYaiOpnxCydwPNWqWJ/tSSjY1mqtqU5ZYNpWal2pJiGy0XSi1bVuKX1Fyh1GuMoJYeUeJvy/GEVbTpfTOjHJRVzUim0tlcwekbKD1QrgR5M97OV8nIyMjQsKPUEKWGNEVFFBwqEs/yHMEVFMM1PIc4FhiWQVxHcxjD0zzXEkgbmHe5G1eA9T955453xd+B9tbpi6vj10+fvj6+evH0Fju7vPDU5szVY8euzmw+tXABv7kEov/v33WOv+v/C8LG9M2xD19/EquzCyuHVuY6R25Obz35+odw4NDKwuzWHAK86q9x21wKYYQkjFeZ3M5f/TUmw6Qo12P+38Wf0zEZpVABlVANfQu1owHXXMD1AdIyQhvNgeou2b1LAuhAkVwyExRps/ppAE230qrTX1MrEVXil5W4qlm9thMAMpR2MtVHAbXMnBJvZ8oVGjdZ5XK6u6cwNExqdNJ9dnm4D+8eIeYeM7hH0b3H9bcQuczdeH75ef+TxTveO/5tuDK2Mrs5d+HmzQtzm7MrbP6ZqxMrrz2+vf34aysTV5+5iN9YhMi51W93Tiz5/wFp+ujy/MntGXx+dfrjqflrO788Ob989MaMP716+Nr8FOpCjbvnw032BUrm82gKfQc10SJaAwwZGINHEUrksaEndI3XCppBavWaU7Nrda/u7QfPsnmBF1ReK4NjCxbkgVRJdW/MdmiyjHkhCgKvGkrNq+uGngPLUDXVioJTcGxONWguENOIYmkq1lQqaDu2q1AqKi6qRh6CN0uqhlkn1WIwt1Z3FTqH6lt2kWLkqZpQ2F1H4D3X1CzFUkCp1R8EVaeKGr3mgXpyd3OKZTcgioMi3qImqA2FaFSYrkHd7BYESnSMdqAx1HNgg/6pG0Bo95RAGehqoNAuaRHR90wGdXyJtkAJ1DxSDVQCfS8ocui+EohqagNjFroniyLAOYbBgvSQxuXxiUSCGQXReJBnjafhbf6xBs8P9ZclLLJdTJfdL3bLRsgd50Nf52P7JIWjInYqFuZhUGErucF0Qj/zNJtPGArDz7EYFi0chvSpw8C/mJRgRVLfgrEf7RvowhyjJ3JPfPlX/h8N/6fZryX7bh/pJsPj4QLX9Ra89NL3QQkljmOqnognU6HcxKkoI/JsaJ8cDcfCqZAMC2cfFeSoHu+WFEmWzIQqx8PVmCThSFqPKqLIsgxJx0QYZt1iocjgfrPbjIoiltkXxzxTlE5FVTL1zb7YmTOSzXGiEBU0ZgHzXexjd9HklDtTc2P7iR4/Wmqk/jGhfZXjZW1bYFVp3y01G+ocrh/K9VST3+05OUsaEnAYGKZRfWIpDQaXT2Ej2/vCl1S5nNe7jHq5eCAlM7rOpFx8PP1Zf/NzCUdkpXjUhHmdfdi/Xv31D6WccPAIDjNMmPnBzC+ErAipZzPf++LkQyGRhTDEpCNkbmLpz8892zmE3+8swq1YODIqf2Z7lO8RdJHn7RS8kpY6r0qhAg7xXIHnhViu+zBDbhcx16UOfGVgaGkoXe6LhwS+h7NgSa+vR7ESZvPyq6VUqN+SC0ZSTPm3oETGoxGIh/p60w3naIyJ/Gywf9CMnnAemR3524hT5DErxOwBhR55COMw3e+u0T0tOEsR0JMx+NBHftD/AJ+D/f7v/TW+9t+P+Bo9e/7vNYz+By6FsKkAAAB42mNgZGBgYGRwbI8IWhzPb/OVQZ6DAQTOni3fCKP/+/x7yrOBNRTI5WBgAokCAG3mDbAAeNpjYGRgYFX9t5eBgeftf5//WTwbGIAiKMAdAJycBph42mN6w+DCwcDAAMIsZ8D0HhBNLIap52D478fBwHQRyvbBpZ7nLYMtKeZjt5OJhxT1TKsYGFhDETTjcSAG0gyPoRgozigIpL0hNEiOBcgFAEBoNC142mNgYNCBwjoccALDBEY9RhsgPIMMmZcRhHtIhkcA9pQspAAAAQAAAEcBVAALAAAAAAACAAEAAgAWAAABAACTAAAAAHjalZCxTgJBFEXPApJoYYgF9VZUSIAFTdDCnmiIgsTKsASQuGiCu0YaCr4OfomKOzsTCHRmMzPn3blz38sCFyzJ4uXOgbKWZY+8KssZLqk7zkp9cJyjSOT4jD9WjvPSt46vKHoFx2txyfGGqnfPO18kyohSGjBjJPqRFmqPmWolWkZ9o0uHZ/EkfTNgTo0KVX017ujRps+TyDqvT7xW9U/UV1Vz9ZryrQn8o8QOL1JsdVA/5IwZpv7f/YsKTW50O1PqpzKNZyw1UnKov2c9dbkD7c1/zdhXFSrNdIz3HbuaJFH1KM9CZyDN3N3SoiFupfP66mbOYAd8k0EGAHjabc05TwJhHITxZ0BBBc/P4IkI7y4sh0dBsosHKiqHeLUiiTE0FH56Xdl/6TS/ZIoZUszzM+ad/3IOSilNmm122GWPfQ4ocEiRI0qUcXj4VKgSUKNOgybHnHDKGSER7Xjjgkuu6HDNDbd0ueOeB3r0GTDkkRFPPPPCK29a0KIyympJy1pRTnmtak3r2tCmtjLjz+/ph5edfU2cc2Fiy/3px4Xpmb5ZMatmYNbMutkwm2Yr0W8nBnOj+OcXVDk0PnjaRc67DoJAEAVQFuT9fqsJCSZ2+w12QkNjrCCx9w+sbSy19DsGK/9Ob3RZujk3k7nzZp8bsbvSkXXoR8Yew9gavN9QNHSUHTFch4oMfuoV0uqGNL4nv25emq3yHzzADwVcwOsFHMCtBWzAWQlYgJ0ImIA1rRmAeRbQAWM6vQD04A9GgXglRBo4Kh+19gJGYDgzBqOnZALGO8kUTLaSGZhWkjmYrSULMA8kS7CYi5ZgKTlQxr/W1F5aAAAAAAFRp8cxAAA=) format('woff'),
  34. url('ytp-regular.ttf') format('truetype');
  35. font-weight: normal;
  36. font-style: normal;
  37. }
  38. .mb_YTVPlayer :focus {
  39. outline: 0;
  40. }
  41. .mb_YTVPlayer{
  42. display:block;
  43. transform:translateZ(0);
  44. transform-style: preserve-3d;
  45. perspective: 1000;
  46. backface-visibility: hidden;
  47. transform:translate3d(0,0,0);
  48. animation-timing-function: linear;
  49. }
  50. .mb_YTVPlayer.fullscreen{
  51. display:block;
  52. position: fixed;
  53. width: 100%;
  54. height: 100%;
  55. top: 0;
  56. left: 0;
  57. margin: 0!important;
  58. }
  59. .mbYTP_wrapper iframe{
  60. max-width: 4000px !important;
  61. }
  62. .inline_YTPlayer{
  63. margin-bottom: 20px;
  64. vertical-align:top;
  65. position:relative;
  66. left:0;
  67. overflow: hidden;
  68. border-radius: 4px;
  69. -moz-box-shadow: 0 0 5px rgba(0,0,0,.7);
  70. -webkit-box-shadow: 0 0 5px rgba(0,0,0,.7);
  71. box-shadow: 0 0 5px rgba(0,0,0,.7);
  72. background: rgba(0,0,0,.5);
  73. }
  74. .inline_YTPlayer img{
  75. border: none!important;
  76. -moz-transform: none!important;
  77. -webkit-transform: none!important;
  78. -o-transform: none!important;
  79. transform: none!important;
  80. margin:0!important;
  81. padding:0!important
  82. }
  83. /*CONTROL BAR*/
  84. .mb_YTVPBar .ytpicon {
  85. border: 1px solid;
  86. border-radius: 50px;
  87. font-family: 'ytpregular';
  88. font-size: 55px;
  89. line-height: 65px;
  90. }
  91. .mb_YTVPBar .mb_YTVPUrl.ytpicon{
  92. font-size: 25px;
  93. }
  94. .mb_YTVPBar .ytpicon:onclick{
  95. opacity:0.1;
  96. }
  97. .mb_YTVPBar{
  98. transition: opacity 1s;
  99. -moz-transition: opacity 1s;
  100. -webkit-transition: opacity 1s;
  101. -o-transition: opacity 1s;
  102. display:block;
  103. width:100%;
  104. height:5px;
  105. background:#333;
  106. position:fixed;
  107. bottom:0;
  108. left:0;
  109. -moz-box-sizing:padding-box;
  110. -webkit-box-sizing:border-box;
  111. text-align:left;
  112. z-index: 15;
  113. font: 14px/16px sans-serif;
  114. color:white;
  115. opacity:.7;
  116. }
  117. .mb_YTVPBar.visible, .mb_YTVPBar:hover{
  118. opacity:1;
  119. }
  120. .mb_YTVPBar .buttonBar{
  121. transition: all 1s;
  122. -moz-transition: all 1s;
  123. -webkit-transition: all 1s;
  124. -o-transition: all 1s;
  125. background:transparent;
  126. font:12px/14px Calibri;
  127. position:absolute;
  128. top:-320px;
  129. left:0;
  130. padding: 5px;
  131. text-align:center;
  132. width:100%;
  133. -moz-box-sizing: border-box;
  134. -webkit-box-sizing: border-box;
  135. -o-box-sizing: border-box;
  136. box-sizing: border-box;
  137. }
  138. .mb_YTVPBar span{
  139. display: inline-block;
  140. font: 16px/20px Calibri,sans-serif;
  141. height: 65px;
  142. margin: 0 5px;
  143. position: relative;
  144. vertical-align: middle;
  145. width: 65px;
  146. }
  147. .mb_YTVPBar span.mb_YTVPTime{
  148. display: none;
  149. width: 130px;
  150. }
  151. .mb_YTVPBar span.mb_YTVPUrl,.mb_YTVPBar span.mb_OnlyYT {
  152. position: absolute;
  153. width: auto;
  154. display:none;
  155. top:6px;
  156. right:10px;
  157. cursor: pointer;
  158. }
  159. .mb_YTVPBar span.mb_YTVPUrl img{
  160. width: 60px;
  161. }
  162. .mb_YTVPBar span.mb_OnlyYT {
  163. left:185px;
  164. right: auto;
  165. }
  166. .mb_YTVPBar span.mb_OnlyYT img{
  167. width: 25px;
  168. }
  169. .mb_YTVPBar span.mb_YTVPUrl a{
  170. color:white;
  171. }
  172. .mb_YTVPPlaypause,.mb_YTVPlayer .mb_YTVPPlaypause img{
  173. cursor:pointer;
  174. }
  175. .mb_YTVPMuteUnmute{
  176. cursor:pointer;
  177. display:none !important;
  178. }
  179. /*PROGRESS BAR*/
  180. .mb_YTVPProgress{
  181. height:5px;
  182. width:100%;
  183. background:transparent;
  184. bottom:0;
  185. left:0;
  186. }
  187. .mb_YTVPLoaded{
  188. height:5px;
  189. width:0;
  190. background:#2c2c2c;
  191. left:0;
  192. }
  193. .mb_YTVTime{
  194. height:5px;
  195. width:0;
  196. background:rgba(255,255,255,0.3);
  197. bottom:0;
  198. left:0;
  199. -moz-box-shadow:#666666 1px 1px 3px;
  200. -webkit-box-shadow:#666666 1px 1px 3px;
  201. }
  202. .YTPOverlay.raster{
  203. background: url("../images/raster.html");
  204. }
  205. .YTPOverlay.raster.retina{
  206. background: url("../images/raster%402x.html");
  207. }