Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Whoah! Loads of changes. We're getting close.

  • Loading branch information...
commit 5ff8e88e82fe22369a9c60b25ea6eea1a94366ff 1 parent af15230
@justintadlock authored
View
339 LICENSE
@@ -1,339 +0,0 @@
-GNU GENERAL PUBLIC LICENSE
- Version 2, June 1991
-
- Copyright (C) 1989, 1991 Free Software Foundation, Inc.,
- 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
- Everyone is permitted to copy and distribute verbatim copies
- of this license document, but changing it is not allowed.
-
- Preamble
-
- The licenses for most software are designed to take away your
-freedom to share and change it. By contrast, the GNU General Public
-License is intended to guarantee your freedom to share and change free
-software--to make sure the software is free for all its users. This
-General Public License applies to most of the Free Software
-Foundation's software and to any other program whose authors commit to
-using it. (Some other Free Software Foundation software is covered by
-the GNU Lesser General Public License instead.) You can apply it to
-your programs, too.
-
- When we speak of free software, we are referring to freedom, not
-price. Our General Public Licenses are designed to make sure that you
-have the freedom to distribute copies of free software (and charge for
-this service if you wish), that you receive source code or can get it
-if you want it, that you can change the software or use pieces of it
-in new free programs; and that you know you can do these things.
-
- To protect your rights, we need to make restrictions that forbid
-anyone to deny you these rights or to ask you to surrender the rights.
-These restrictions translate to certain responsibilities for you if you
-distribute copies of the software, or if you modify it.
-
- For example, if you distribute copies of such a program, whether
-gratis or for a fee, you must give the recipients all the rights that
-you have. You must make sure that they, too, receive or can get the
-source code. And you must show them these terms so they know their
-rights.
-
- We protect your rights with two steps: (1) copyright the software, and
-(2) offer you this license which gives you legal permission to copy,
-distribute and/or modify the software.
-
- Also, for each author's protection and ours, we want to make certain
-that everyone understands that there is no warranty for this free
-software. If the software is modified by someone else and passed on, we
-want its recipients to know that what they have is not the original, so
-that any problems introduced by others will not reflect on the original
-authors' reputations.
-
- Finally, any free program is threatened constantly by software
-patents. We wish to avoid the danger that redistributors of a free
-program will individually obtain patent licenses, in effect making the
-program proprietary. To prevent this, we have made it clear that any
-patent must be licensed for everyone's free use or not licensed at all.
-
- The precise terms and conditions for copying, distribution and
-modification follow.
-
- GNU GENERAL PUBLIC LICENSE
- TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
-
- 0. This License applies to any program or other work which contains
-a notice placed by the copyright holder saying it may be distributed
-under the terms of this General Public License. The "Program", below,
-refers to any such program or work, and a "work based on the Program"
-means either the Program or any derivative work under copyright law:
-that is to say, a work containing the Program or a portion of it,
-either verbatim or with modifications and/or translated into another
-language. (Hereinafter, translation is included without limitation in
-the term "modification".) Each licensee is addressed as "you".
-
-Activities other than copying, distribution and modification are not
-covered by this License; they are outside its scope. The act of
-running the Program is not restricted, and the output from the Program
-is covered only if its contents constitute a work based on the
-Program (independent of having been made by running the Program).
-Whether that is true depends on what the Program does.
-
- 1. You may copy and distribute verbatim copies of the Program's
-source code as you receive it, in any medium, provided that you
-conspicuously and appropriately publish on each copy an appropriate
-copyright notice and disclaimer of warranty; keep intact all the
-notices that refer to this License and to the absence of any warranty;
-and give any other recipients of the Program a copy of this License
-along with the Program.
-
-You may charge a fee for the physical act of transferring a copy, and
-you may at your option offer warranty protection in exchange for a fee.
-
- 2. You may modify your copy or copies of the Program or any portion
-of it, thus forming a work based on the Program, and copy and
-distribute such modifications or work under the terms of Section 1
-above, provided that you also meet all of these conditions:
-
- a) You must cause the modified files to carry prominent notices
- stating that you changed the files and the date of any change.
-
- b) You must cause any work that you distribute or publish, that in
- whole or in part contains or is derived from the Program or any
- part thereof, to be licensed as a whole at no charge to all third
- parties under the terms of this License.
-
- c) If the modified program normally reads commands interactively
- when run, you must cause it, when started running for such
- interactive use in the most ordinary way, to print or display an
- announcement including an appropriate copyright notice and a
- notice that there is no warranty (or else, saying that you provide
- a warranty) and that users may redistribute the program under
- these conditions, and telling the user how to view a copy of this
- License. (Exception: if the Program itself is interactive but
- does not normally print such an announcement, your work based on
- the Program is not required to print an announcement.)
-
-These requirements apply to the modified work as a whole. If
-identifiable sections of that work are not derived from the Program,
-and can be reasonably considered independent and separate works in
-themselves, then this License, and its terms, do not apply to those
-sections when you distribute them as separate works. But when you
-distribute the same sections as part of a whole which is a work based
-on the Program, the distribution of the whole must be on the terms of
-this License, whose permissions for other licensees extend to the
-entire whole, and thus to each and every part regardless of who wrote it.
-
-Thus, it is not the intent of this section to claim rights or contest
-your rights to work written entirely by you; rather, the intent is to
-exercise the right to control the distribution of derivative or
-collective works based on the Program.
-
-In addition, mere aggregation of another work not based on the Program
-with the Program (or with a work based on the Program) on a volume of
-a storage or distribution medium does not bring the other work under
-the scope of this License.
-
- 3. You may copy and distribute the Program (or a work based on it,
-under Section 2) in object code or executable form under the terms of
-Sections 1 and 2 above provided that you also do one of the following:
-
- a) Accompany it with the complete corresponding machine-readable
- source code, which must be distributed under the terms of Sections
- 1 and 2 above on a medium customarily used for software interchange; or,
-
- b) Accompany it with a written offer, valid for at least three
- years, to give any third party, for a charge no more than your
- cost of physically performing source distribution, a complete
- machine-readable copy of the corresponding source code, to be
- distributed under the terms of Sections 1 and 2 above on a medium
- customarily used for software interchange; or,
-
- c) Accompany it with the information you received as to the offer
- to distribute corresponding source code. (This alternative is
- allowed only for noncommercial distribution and only if you
- received the program in object code or executable form with such
- an offer, in accord with Subsection b above.)
-
-The source code for a work means the preferred form of the work for
-making modifications to it. For an executable work, complete source
-code means all the source code for all modules it contains, plus any
-associated interface definition files, plus the scripts used to
-control compilation and installation of the executable. However, as a
-special exception, the source code distributed need not include
-anything that is normally distributed (in either source or binary
-form) with the major components (compiler, kernel, and so on) of the
-operating system on which the executable runs, unless that component
-itself accompanies the executable.
-
-If distribution of executable or object code is made by offering
-access to copy from a designated place, then offering equivalent
-access to copy the source code from the same place counts as
-distribution of the source code, even though third parties are not
-compelled to copy the source along with the object code.
-
- 4. You may not copy, modify, sublicense, or distribute the Program
-except as expressly provided under this License. Any attempt
-otherwise to copy, modify, sublicense or distribute the Program is
-void, and will automatically terminate your rights under this License.
-However, parties who have received copies, or rights, from you under
-this License will not have their licenses terminated so long as such
-parties remain in full compliance.
-
- 5. You are not required to accept this License, since you have not
-signed it. However, nothing else grants you permission to modify or
-distribute the Program or its derivative works. These actions are
-prohibited by law if you do not accept this License. Therefore, by
-modifying or distributing the Program (or any work based on the
-Program), you indicate your acceptance of this License to do so, and
-all its terms and conditions for copying, distributing or modifying
-the Program or works based on it.
-
- 6. Each time you redistribute the Program (or any work based on the
-Program), the recipient automatically receives a license from the
-original licensor to copy, distribute or modify the Program subject to
-these terms and conditions. You may not impose any further
-restrictions on the recipients' exercise of the rights granted herein.
-You are not responsible for enforcing compliance by third parties to
-this License.
-
- 7. If, as a consequence of a court judgment or allegation of patent
-infringement or for any other reason (not limited to patent issues),
-conditions are imposed on you (whether by court order, agreement or
-otherwise) that contradict the conditions of this License, they do not
-excuse you from the conditions of this License. If you cannot
-distribute so as to satisfy simultaneously your obligations under this
-License and any other pertinent obligations, then as a consequence you
-may not distribute the Program at all. For example, if a patent
-license would not permit royalty-free redistribution of the Program by
-all those who receive copies directly or indirectly through you, then
-the only way you could satisfy both it and this License would be to
-refrain entirely from distribution of the Program.
-
-If any portion of this section is held invalid or unenforceable under
-any particular circumstance, the balance of the section is intended to
-apply and the section as a whole is intended to apply in other
-circumstances.
-
-It is not the purpose of this section to induce you to infringe any
-patents or other property right claims or to contest validity of any
-such claims; this section has the sole purpose of protecting the
-integrity of the free software distribution system, which is
-implemented by public license practices. Many people have made
-generous contributions to the wide range of software distributed
-through that system in reliance on consistent application of that
-system; it is up to the author/donor to decide if he or she is willing
-to distribute software through any other system and a licensee cannot
-impose that choice.
-
-This section is intended to make thoroughly clear what is believed to
-be a consequence of the rest of this License.
-
- 8. If the distribution and/or use of the Program is restricted in
-certain countries either by patents or by copyrighted interfaces, the
-original copyright holder who places the Program under this License
-may add an explicit geographical distribution limitation excluding
-those countries, so that distribution is permitted only in or among
-countries not thus excluded. In such case, this License incorporates
-the limitation as if written in the body of this License.
-
- 9. The Free Software Foundation may publish revised and/or new versions
-of the General Public License from time to time. Such new versions will
-be similar in spirit to the present version, but may differ in detail to
-address new problems or concerns.
-
-Each version is given a distinguishing version number. If the Program
-specifies a version number of this License which applies to it and "any
-later version", you have the option of following the terms and conditions
-either of that version or of any later version published by the Free
-Software Foundation. If the Program does not specify a version number of
-this License, you may choose any version ever published by the Free Software
-Foundation.
-
- 10. If you wish to incorporate parts of the Program into other free
-programs whose distribution conditions are different, write to the author
-to ask for permission. For software which is copyrighted by the Free
-Software Foundation, write to the Free Software Foundation; we sometimes
-make exceptions for this. Our decision will be guided by the two goals
-of preserving the free status of all derivatives of our free software and
-of promoting the sharing and reuse of software generally.
-
- NO WARRANTY
-
- 11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY
-FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN
-OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
-PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED
-OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
-MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS
-TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE
-PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,
-REPAIR OR CORRECTION.
-
- 12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
-WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR
-REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
-INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING
-OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED
-TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
-YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
-PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
-POSSIBILITY OF SUCH DAMAGES.
-
- END OF TERMS AND CONDITIONS
-
- How to Apply These Terms to Your New Programs
-
- If you develop a new program, and you want it to be of the greatest
-possible use to the public, the best way to achieve this is to make it
-free software which everyone can redistribute and change under these terms.
-
- To do so, attach the following notices to the program. It is safest
-to attach them to the start of each source file to most effectively
-convey the exclusion of warranty; and each file should have at least
-the "copyright" line and a pointer to where the full notice is found.
-
- Base stylesheet for theme developers to work with the WordPress media player (mediaelement.js).
- Copyright (C) 2013 Justin Tadlock
-
- This program is free software; you can redistribute it and/or modify
- it under the terms of the GNU General Public License as published by
- the Free Software Foundation; either version 2 of the License, or
- (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU General Public License for more details.
-
- You should have received a copy of the GNU General Public License along
- with this program; if not, write to the Free Software Foundation, Inc.,
- 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
-
-Also add information on how to contact you by electronic and paper mail.
-
-If the program is interactive, make it output a short notice like this
-when it starts in an interactive mode:
-
- Gnomovision version 69, Copyright (C) year name of author
- Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
- This is free software, and you are welcome to redistribute it
- under certain conditions; type `show c' for details.
-
-The hypothetical commands `show w' and `show c' should show the appropriate
-parts of the General Public License. Of course, the commands you use may
-be called something other than `show w' and `show c'; they could even be
-mouse-clicks or menu items--whatever suits your program.
-
-You should also get your employer (if you work as a programmer) or your
-school, if any, to sign a "copyright disclaimer" for the program, if
-necessary. Here is a sample; alter the names:
-
- Yoyodyne, Inc., hereby disclaims all copyright interest in the program
- `Gnomovision' (which makes passes at compilers) written by James Hacker.
-
- {signature of Ty Coon}, 1 April 1989
- Ty Coon, President of Vice
-
-This General Public License does not permit incorporating your program into
-proprietary programs. If your program is a subroutine library, you may
-consider it more useful to permit linking proprietary applications with the
-library. If this is what you want to do, use the GNU Lesser General
-Public License instead of this License.
View
34 README.md
@@ -13,13 +13,43 @@ Follow the "/dev" branch for the latest updates. Please make pull requests and
https://github.com/justintadlock/theme-mediaelement/tree/dev
+=== Usage ===
+
+Either load the "mediaelements.min.css" file via `wp_enqueue_script()` or `@import()` it at the top of your `style.css`. Then, add the following to your `functions.php`.
+
+ add_action( 'wp_enqueue_scripts', 'my_deregister_styles' );
+
+ function my_deregister_styles() {
+ wp_deregister_style( 'mediaelement' );
+ wp_deregister_style( 'wp-mediaelement' );
+ }
+
=== Todo ===
* Figure out elements that I don't understand yet. :)
* Remove as much "style" as possible, including fonts, colors, and backgrounds.
-* Don't rely on any images. Allow theme devs to handle this.
+* Don't rely on any images (maybe). Allow theme devs to handle this.
* Simplify. Simplify. Simplify.
=== Resources ===
-* http://mediaelementjs.com
+* http://mediaelementjs.com
+
+=== Structure ===
+
+Basic structure of the media player:
+
+ <div class="mejs-container">
+ <div class="mejs-inner">
+ <div class="mejs-mediaelement">
+ <audio class="wp-audio-shortcode">...</audio>
+ </div>
+ <div class="mejs-layers">
+ <div class="mejs-layer">...</div>
+ </div>
+ <div class="mejs-controls">
+ <div class="mejs-button"></div>
+ </div>
+ <div class="mejs-clear">...</div>
+ </div>
+ </div>
View
1  bigplay.svg
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?>
View
1  controls.svg
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?>
View
0  background.png → images/background.png
File renamed without changes
View
0  bigplay.png → images/bigplay.png
File renamed without changes
View
0  controls.png → images/controls.png
File renamed without changes
View
0  loading.gif → images/loading.gif
File renamed without changes
View
823 mediaelement.css
@@ -1,15 +1,35 @@
/**
- * WP Theme Mediaelement Stylesheet.
+ * WordPress Theme Mediaelement.js Stylesheet
*
- * @version 20130830
+ * A base stylesheet to allow theme developers to more easily overwrite the styles for the WordPress media
+ * player, which is mediaelement.js. Theme developers are expected to handle colors, fonts, backgrounds,
+ * and other stylistic elements. This stylesheet exists as a base for layout and positioning. However,
+ * themes can also overwrite these things.
+ *
+ * @version 20130830.1
+ * @link https://github.com/justintadlock/theme-mediaelement
+ * @link http://mediaelementjs.com
+ */
+
+/**
+ * Table of Contents:
+ * 01: Structure
+ * 02: Media Element
+ * 03: Layers
+ * 04: Controls
+ * 05: Clear
+ * 06: Todo
*/
-/* ====== Media player container ====== */
+/**
+ * 01: Structure - Layout of the major structural elements.
+ * --------------------------------------------------------------------------- */
/* === Container === */
.mejs-container {
display: block;
+ position: relative;
margin: 0;
padding: 0;
vertical-align: baseline;
@@ -20,162 +40,266 @@
text-decoration: none;
}
-/* Alternatives to .mejs-container. Also note that this class is given to the <audio> and <video> elements too. */
+/* Alternatives to .mejs-container. Note that these classses are given to the <audio> and <video> elements. */
.wp-audio-shortcode {}
+.mejs-container.wp-audio-shortcode {}
+
.wp-video-shortcode {}
+.mejs-container.wp-video-shortcode {}
- /* ?? */
- .me-plugin {
- position: absolute;
+ /* === Fullscreen view === */
+
+ .mejs-fullscreen {
+ overflow: hidden!important;
}
+ .mejs-container-fullscreen {
+ overflow: hidden;
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 1000;
+ }
- .mejs-embed,
- .mejs-embed body {
- overflow: hidden;
- width: 100%;
- height: 100%;
- margin: 0;
- padding: 0;
- }
+ /* === Inner wrapper === */
+
+ .mejs-inner {}
+
+ /* Inside structural wrappers. */
+ .mejs-mediaelement {}
+ .mejs-layers {}
+ .mejs-controls {}
+ .mejs-clear {}
-/* === Fullscreen view === */
+/**
+ * 02: Media Element - Wrapper for the actual media HTML (<audio>, <video>).
+ * --------------------------------------------------------------------------- */
-.mejs-fullscreen {
- overflow: hidden!important;
+.mejs-mediaelement {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
}
- .mejs-container-fullscreen {
- position: fixed;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
- overflow: hidden;
- z-index: 1000;
- }
+ /* Audio and video elements */
+ .mejs-mediaelement audio {}
+ audio.wp-audio-shortcode {}
+
+ .mejs-mediaelement video {}
+ video.wp-video-shortcode {}
+ /* Fullscreen */
.mejs-container-fullscreen .mejs-mediaelement,
.mejs-container-fullscreen video {
- width: 100%;
- height: 100%;
+ width: 100%;
+ height: 100%;
}
-/* === Clear === */
-
-.mejs-clear {
- clear: both;
-}
-
-/* === Background ?? === */
-
-.mejs-background {
- position: absolute;
- top: 0;
- left: 0;
-}
+ /* ?? */
+ .me-plugin {
+ position: absolute;
+ }
-/* === Inner wrapper === */
+ /* Embedding youtube.com, etc.??? */
+ .mejs-embed,
+ .mejs-embed body {
+ overflow: hidden;
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ }
-.mejs-inner {}
+ /* === Background ?? === */
- .mejs-mediaelement {
+ .mejs-background {
position: absolute;
top: 0;
left: 0;
- width: 100%;
- height: 100%;
}
- .mejs-mediaelement audio {}
- .mejs-mediaelement video {}
- .mejs-layers {}
+/**
+ * 03: Layers - Overlays and other layers to place over the media player.
+ * --------------------------------------------------------------------------- */
+
+.mejs-layers {}
- /* ====== Poster ===== */
+ /* === Poster - <video poster="example.png"> - default video image. === */
+
+ .mejs-poster {
+ position: absolute;
+ top: 0;
+ left: 0;
+ background-size: contain;
+ background-position: 50% 50%;
+ background-repeat: no-repeat;
+ }
- .mejs-poster {
- position: absolute;
- top: 0;
- left: 0;
- background-size: contain;
- background-position: 50% 50%;
- background-repeat: no-repeat;
+ :root .mejs-poster img {
+ display: none;
}
- :root .mejs-poster img {
- display: none;
- }
+ .mejs-poster img {
+ margin: 0;
+ padding: 0;
+ border: none;
+ }
+
+ /* ====== Overlay ====== */
+
+ .mejs-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+
+ /* === Overlay play button === */
- .mejs-poster img {
- border: 0;
- padding: 0;
- border: 0;
+ .mejs-overlay-play {
+ cursor: pointer;
+ }
+
+ /**
+ * Play button. Assumes a 100px x 100px image. Adjust top/left margins if using a different
+ * size. Adjust by 1/2 of the height/width.
+ */
+ .mejs-overlay-button {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 100px;
+ height: 100px;
+ margin: -50px 0 0 -50px;
+ background: url( 'images/bigplay.png' ) no-repeat;
}
- /* === Controls === */
+ /* Only needed if you use an .svg file for your normal background. */
+ .no-svg .mejs-overlay-button {
+ }
- .mejs-controls {}
+ /* Adjust background position or other items when play button is hovered. */
+ .mejs-overlay:hover .mejs-overlay-button {
+ background-position: 0 -100px;
+ }
+ /* === Overlay loading === */
+ /**
+ * Loading image is expected to be 80px by 80px. You'll need to adjust the width, height,
+ * and margin values (1/2 of size) for a different size.
+ */
+ .mejs-overlay-loading {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 80px;
+ height: 80px;
+ margin: -40px 0 0 -40px;
+ background: #333;
+ }
-/* ====== Overlay ====== */
+ .mejs-overlay-loading span {
+ display: block;
+ width: 80px;
+ height: 80px;
+ background: transparent url( 'images/loading.gif' ) 50% 50% no-repeat;
+ }
-.mejs-overlay {
- position: absolute;
- top: 0;
- left: 0;
-}
+ /* === Captions Layer (not supported in WP core as of 3.6). === */
- /* === Overlay play button === */
+ /* Example: http://mediaelementjs.com/examples/?name=translation */
- .mejs-overlay-play {
- cursor: pointer;
+ .mejs-captions-layer {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ text-align: center;
+ color: #fff;
}
- /**
- * Play button. Assumes a 100px x 100px image. Adjust top/left margins if using a different
- * size. Adjust by 1/2 of the height/width.
- */
- .mejs-overlay-button {
+ .mejs-captions-layer a {
+ color: #fff;
+ text-decoration: underline;
+ }
+
+ .mejs-captions-position {
position: absolute;
- top: 50%;
- left: 50%;
- width: 100px;
- height: 100px;
- margin: -50px 0 0 -50px;
+ width: 100%;
+ bottom: 15px;
+ left: 0;
}
- /* Only needed if you use an .svg file for your normal background. */
- .no-svg .mejs-overlay-button {
- }
+ .mejs-captions-position-hover {
+ bottom: 45px;
+ }
- /* Adjust background position or other items when play button is hovered. */
- .mejs-overlay:hover .mejs-overlay-button {
+ .mejs-captions-text {
+ padding: 3px 5px;
+ background: rgba(20, 20, 20, 0.8);
}
- /* === Overlay loading */
+ /* ====== Chapters Layer (not supported in WP core as of 3.6). ====== */
- .mejs-overlay-loading {
- position: absolute;
- top: 50%;
- left: 50%;
- width: 80px;
- height: 80px;
- margin: -40px 0 0 -40px;
- background: #333;
+ /* Example: http://mediaelementjs.com/examples/?name=chapters */
+
+ .mejs-chapters {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 10000px;
+ z-index: 1;
+
+ -xborder-right: solid 1px #fff;
}
- .mejs-overlay-loading span {
- display: block;
- width: 80px;
- height: 80px;
- background: transparent url(loading.gif) 50% 50% no-repeat;
+ .mejs-chapter {
+ overflow: hidden;
+ position: absolute;
+ float: left;
+ background: #222;
+ border: none;
}
+ .mejs-chapter-block {
+ display: block;
+ padding: 5px;
+ color: #fff;
+ border-right: solid 1px #333;
+ border-bottom: solid 1px #333;
+ cursor: pointer;
+ }
+
+ .mejs-chapter-block-last {
+ border-right: none;
+ }
+
+ .mejs-chapter-block:hover {
+ background: #666;
+ }
+
+ .mejs-chapter-block .ch-title {
+ display: block;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ margin: 0 0 3px;
+ }
+
+ .mejs-chapter-block .ch-timespan {
+ display: block;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ margin: 3px 0 4px;
+ }
-/* ====== Controls ====== */
+/**
+ * 04: Controls - The media player control panel.
+ * --------------------------------------------------------------------------- */
.mejs-controls {
position: absolute;
@@ -186,6 +310,7 @@
left: 0;
width: 100%;
height: 30px;
+ background: #323232;
}
/* Individual control sections. */
@@ -196,110 +321,105 @@
padding: 0;
width: 26px;
height: 26px;
- border: 0;
+ border: none;
+ font-size: 11px;
+ line-height: 11px;
+ font-family: Helvetica, Arial;
}
/* Individual buttons. */
- .mejs-controls .mejs-button button {
- display: block;
+ .mejs-button button {
+ display: block;
position: absolute;
- width: 16px;
- height: 16px;
- margin: 7px 5px;
- padding: 0;
- cursor: pointer;
+ width: 16px;
+ height: 16px;
+ margin: 7px 5px;
+ padding: 0;
+ cursor: pointer;
- border: 0;
+ border: none;
font-size: 0;
line-height: 0;
text-decoration: none;
- background: transparent url(controls.svg) no-repeat;
+ background: transparent url( 'images/controls.png' ) no-repeat;
}
- .no-svg .mejs-controls .mejs-button button {
- background-image: url(controls.png);
- }
+ .no-svg .mejs-button button {}
- .mejs-controls .mejs-button button:focus {
+ .mejs-button button:focus {
outline: solid 1px yellow;
}
- /* Wrapper div for the play/pause button */
+ /* === Play/Pause === */
- .mejs-controls .mejs-playpause-button {}
- .mejs-controls .mejs-play {} /* Class when playing. */
- .mejs-controls .mejs-play {} /* Class when paused. */
- .mejs-controls .mejs-stop {} /* Stop button. */
+ .mejs-playpause-button {}
+ .mejs-play {} /* Class when playing. */
+ .mejs-play {} /* Class when paused. */
+ .mejs-stop {} /* Stop button. */
- .mejs-controls .mejs-playpause-button button {}
+ .mejs-playpause-button button {}
- .mejs-controls .mejs-play button {
+ .mejs-play button {
background-position: 0 0;
}
- .mejs-controls .mejs-pause button {
+
+ .mejs-pause button {
background-position: 0 -16px;
}
- .mejs-controls .mejs-stop button {
+
+ .mejs-stop button {
background-position: -112px 0;
}
- /* Wrapper div for the media time (current time). */
+ /* === Media Time (current time) === */
.mejs-controls .mejs-time {
- color: #fff;
- display: block;
- height: 17px;
- width: auto;
- padding: 8px 3px 0 3px;
- overflow: hidden;
+ overflow: hidden;
+ display: block;
+ width: auto;
+ height: 17px;
+ padding: 8px 3px 0;
+ color: #fff;
text-align: center;
- -moz-box-sizing: content-box;
- -webkit-box-sizing: content-box;
+
+ -moz-box-sizing: content-box;
+ -webkit-box-sizing: content-box;
box-sizing: content-box;
}
/* Individual elements within the time wrapper. */
- .mejs-controls .mejs-time span {
- color: #fff;
- font-size: 11px;
- line-height: 12px;
- display: block;
- float: left;
- margin: 1px 2px 0 0;
- width: auto;
+ .mejs-time span {
+ display: block;
+ float: left;
+ width: auto;
+ margin: 1px 2px 0 0;
+ color: #fff;
}
- .mejs-controls .mejs-time .mejs-currenttime {}
+ .mejs-time .mejs-currenttime {}
/* Wrapper div for the time rail. */
- .mejs-time-rail {
+ .mejs-controls .mejs-time-rail {
direction: ltr;
width: 200px;
padding-top: 5px;
}
- .rtl .mejs-time-rail {
- direction: rtl;
- }
-
/* Individual elements within the time rail */
.mejs-time-rail span {
- display: block;
- position: absolute;
- width: 180px;
- height: 10px;
- -webkit-border-radius: 2px;
- -moz-border-radius: 2px;
- border-radius: 2px;
- cursor: pointer;
+ display: block;
+ position: absolute;
+ width: 180px;
+ height: 10px;
+ cursor: pointer;
}
/* Total time. */
.mejs-time-rail .mejs-time-total {
margin: 5px;
- background: #333;
+ background: #222;
}
/* Buffering */
@@ -363,76 +483,82 @@
/* Handle for adjusting current time. */
.mejs-time-rail .mejs-time-handle {
- display: none;
- position: absolute;
- margin: 0;
- width: 10px;
- background: #fff;
- cursor: pointer;
- border: solid 2px #333;
- top: -2px;
- text-align: center;
+ display: none;
+ position: absolute;
+ top: -2px;
+ width: 10px;
+ margin: 0;
+ background: #fff;
+ cursor: pointer;
+ text-align: center;
}
/* Time float (Displays time when hovering cursor over time rail). */
.mejs-time-rail .mejs-time-float {
- position: absolute;
- display: none;
- background: #eee;
- width: 36px;
- height: 17px;
- border: solid 1px #333;
- top: -26px;
- margin-left: -18px;
- text-align: center;
- color: #111;
+ display: none;
+ position: absolute;
+ top: -26px;
+ width: 36px;
+ height: 17px;
+ margin-left: -18px;
+ color: #111;
+ background: #eee;
+ border: solid 1px #333;
+ text-align: center;
}
+ .mejs-long-video .mejs-time-rail .mejs-time-float {
+ width: 48px;
+ }
+
/* Current time position hovering. */
.mejs-time-rail .mejs-time-float-current {
- margin: 2px;
- width: 30px;
- display: block;
- text-align: center;
- left: 0;
+ display: block;
+ left: 0;
+ margin: 2px;
+ width: 30px;
+ text-align: center;
}
+ .mejs-long-video .mejs-time-rail .mejs-time-float-current {
+ width: 44px;
+ }
+
/* Pointer at the botton of the time float. */
.mejs-time-rail .mejs-time-float-corner {
- position: absolute;
- display: block;
- width: 0;
- height: 0;
- line-height: 0;
- border: solid 5px #eee;
- border-color: #eee transparent transparent transparent;
- -webkit-border-radius: 0;
- -moz-border-radius: 0;
- border-radius: 0;
- top: 15px;
- left: 13px;
+ display: block;
+ position: absolute;
+ top: 15px;
+ left: 13px;
+ width: 0;
+ height: 0;
+ line-height: 0;
+ border: solid 5px #eee;
+ border-color: #eee transparent transparent transparent;
+
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+ border-radius: 0;
}
- .mejs-long-video .mejs-time-rail .mejs-time-float {
- width: 48px;
- }
- .mejs-long-video .mejs-time-rail .mejs-time-float-current {
- width: 44px;
- }
.mejs-long-video .mejs-time-rail .mejs-time-float-corner {
- left: 18px;
+ left: 18px;
}
+ /* === Fullscreen === */
+
/* Fullscreen button */
.mejs-fullscreen-button button {
- background-position: -32px 0;
+ background-position: -32px 0;
}
.mejs-unfullscreen button {
- background-position: -32px -16px;
+ background-position: -32px -16px;
}
+ /* === Volume === */
+
/* Volume button */
- .mejs-volume-button {
+ .mejs-controls .mejs-volume-button {
position: relative;
}
.mejs-mute {}
@@ -452,82 +578,82 @@
/* Vertical volume slider (wrapper). */
.mejs-volume-button .mejs-volume-slider {
- display: none;
- height: 115px;
- width: 25px;
+ display: none;
+ position: absolute;
+ top: -115px;
+ left: 0;
+ width: 25px;
+ height: 115px;
+ margin: 0;
background: #323232;
- top: -115px;
- left: 0;
- z-index: 1;
- position: absolute;
- margin: 0;
+ z-index: 1;
}
/* Volume total. */
.mejs-volume-button .mejs-volume-slider .mejs-volume-total {
- position: absolute;
- left: 11px;
- top: 8px;
- width: 2px;
- height: 100px;
+ position: absolute;
+ top: 8px;
+ left: 11px;
+ width: 2px;
+ height: 100px;
+ margin: 0;
background: #ddd;
- margin: 0;
}
/* Volume current */
.mejs-volume-button .mejs-volume-slider .mejs-volume-current {
- position: absolute;
- left: 11px;
- top: 8px;
- width: 2px;
- height: 100px;
+ position: absolute;
+ top: 8px;
+ left: 11px;
+ width: 2px;
+ height: 100px;
+ margin: 0;
background: #ddd;
- margin: 0;
}
/* Volume slider handle */
.mejs-volume-button .mejs-volume-slider .mejs-volume-handle {
- position: absolute;
- left: 4px;
- top: -3px;
- width: 16px;
- height: 6px;
- background: #ddd;
- cursor: N-resize;
- margin: 0;
+ position: absolute;
+ top: -3px;
+ left: 4px;
+ width: 16px;
+ height: 6px;
+ margin: 0;
+ background: #ddd;
+ cursor: N-resize;
}
/* Horizontal volume slider (audio) */
- .mejs-horizontal-volume-slider {
- height: 26px;
- width: 60px;
+ .mejs-controls .mejs-horizontal-volume-slider {
+ height: 26px;
+ width: 60px;
position: relative;
}
/* Volume total. */
.mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
- position: absolute;
- left: 0;
- top: 11px;
- width: 50px;
- height: 8px;
- margin: 0;
- padding: 0;
- font-size: 1px;
- background: #333;
+ position: absolute;
+ top: 11px;
+ left: 0;
+ width: 50px;
+ height: 8px;
+ margin: 0;
+ padding: 0;
+ font-size: 1px;
+ background: #333;
}
/* Volume current. */
.mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
- position: absolute;
- left: 0;
- top: 11px;
- width: 50px;
- height: 8px;
- margin: 0;
- padding: 0;
- font-size: 1px;
- background: #fff;
+ position: absolute;
+ top: 11px;
+ left: 0;
+ width: 50px;
+ height: 8px;
+ margin: 0;
+ padding: 0;
+ font-size: 1px;
+ background: #fff;
}
/* Volume handle. */
@@ -535,8 +661,12 @@
display: none;
}
+ /* === Captions (note that WP core doesn't support these as of 3.6). === */
+
+ /* Example: http://mediaelementjs.com/examples/?name=translation */
+
/* Captions button wrapper */
- .mejs-captions-button {
+ .mejs-controls .mejs-captions-button {
position: relative;
}
@@ -545,152 +675,63 @@
}
.mejs-captions-button .mejs-captions-selector {
- visibility: hidden;
- position: absolute;
- bottom: 26px;
- right: -10px;
- width: 130px;
- height: 100px;
- background: url(background.png);
- background: rgba(50, 50, 50, 0.7);
- border: solid 1px transparent;
- padding: 10px;
- overflow: hidden;
+ overflow: hidden;
+ visibility: hidden;
+ position: absolute;
+ bottom: 26px;
+ right: -10px;
+ width: 130px;
+ height: 100px;
+ padding: 10px;
+ background: #323232;
}
.mejs-captions-button .mejs-captions-selector ul {
- margin: 0;
- padding: 0;
- display: block;
- list-style-type: none;
- overflow: hidden;
+ list-style-type: none;
+ overflow: hidden;
+ display: block;
+ margin: 0;
+ padding: 0;
}
- .mejs-captions-button .mejs-captions-selector ul li {
- margin: 0 0 6px 0;
- padding: 0;
- list-style-type: none!important;
- display: block;
- color: #fff;
- overflow: hidden;
+ .mejs-captions-button .mejs-captions-selector li {
+ list-style-type: none;
+ overflow: hidden;
+ display: block;
+ margin: 0 0 6px;
+ padding: 0;
+ color: #fff;
}
- .mejs-captions-button .mejs-captions-selector ul li input {
- clear: both;
- float: left;
- margin: 3px 3px 0 5px;
+ .mejs-captions-button .mejs-captions-selector input {
+ clear: both;
+ float: left;
+ margin: 3px 3px 0 5px;
}
- .mejs-captions-button .mejs-captions-selector ul li label {
- width: 100px;
- float: left;
- padding: 4px 0 0 0;
- line-height: 15px;
- font-family: helvetica, arial;
- font-size: 10px;
+ .mejs-captions-button .mejs-captions-selector label {
+ float: left;
+ width: 100px;
+ padding: 4px 0 0;
}
.mejs-captions-button .mejs-captions-translations {
- font-size: 10px;
- margin: 0 0 5px 0;
+ margin: 0 0 5px;
}
-/* ====== ??? ====== */
+/**
+ * 05: Clear - Clears any floated elements at the end of the container.
+ * --------------------------------------------------------------------------- */
-.mejs-chapters {
- position: absolute;
- top: 0;
- left: 0;
- -xborder-right: solid 1px #fff;
- width: 10000px;
- z-index: 1;
-}
-.mejs-chapters .mejs-chapter {
- position: absolute;
- float: left;
- background: #222;
- background: rgba(0, 0, 0, 0.7);
- background: -webkit-gradient(linear, 0% 0, 0% 100%, from(rgba(50, 50, 50, 0.7)), to(rgba(0, 0, 0, 0.7)));
- background: -webkit-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
- background: -moz-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
- background: -o-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
- background: -ms-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
- background: linear-gradient(rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
- filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#323232, endColorstr=#000000);
- overflow: hidden;
- border: 0;
-}
-.mejs-chapters .mejs-chapter .mejs-chapter-block {
- font-size: 11px;
- color: #fff;
- padding: 5px;
- display: block;
- border-right: solid 1px #333;
- border-bottom: solid 1px #333;
- cursor: pointer;
-}
-.mejs-chapters .mejs-chapter .mejs-chapter-block-last {
- border-right: none;
-}
-.mejs-chapters .mejs-chapter .mejs-chapter-block:hover {
- background: #666;
- background: rgba(102, 102, 102, 0.7);
- background: -webkit-gradient(linear, 0% 0, 0% 100%, from(rgba(102, 102, 102, 0.7)), to(rgba(50, 50, 50, 0.6)));
- background: -webkit-linear-gradient(top, rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6));
- background: -moz-linear-gradient(top, rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6));
- background: -o-linear-gradient(top, rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6));
- background: -ms-linear-gradient(top, rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6));
- background: linear-gradient(rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6));
- filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#666666, endColorstr=#323232);
-}
-.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-title {
- font-size: 12px;
- font-weight: bold;
- display: block;
- white-space: nowrap;
- text-overflow: ellipsis;
- margin: 0 0 3px 0;
- line-height: 12px;
-}
-.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-timespan {
- font-size: 12px;
- line-height: 12px;
- margin: 3px 0 4px 0;
- display: block;
- white-space: nowrap;
- text-overflow: ellipsis;
-}
-.mejs-captions-layer {
- position: absolute;
- bottom: 0;
- left: 0;
- text-align: center;
- line-height: 22px;
- font-size: 12px;
- color: #fff;
-}
-.mejs-captions-layer a {
- color: #fff;
- text-decoration: underline;
-}
-.mejs-captions-layer[lang=ar] {
- font-size: 20px;
- font-weight: normal;
-}
-.mejs-captions-position {
- position: absolute;
- width: 100%;
- bottom: 15px;
- left: 0;
-}
-.mejs-captions-position-hover {
- bottom: 45px;
-}
-.mejs-captions-text {
- padding: 3px 5px;
- background: url(background.png);
- background: rgba(20, 20, 20, 0.8);
+.mejs-clear {
+ clear: both;
}
+
+/**
+ * 06: Todo - Items that need to be worked on.
+ * --------------------------------------------------------------------------- */
+
+
.me-cannotplay a {
color: #fff;
font-weight: bold;
@@ -755,7 +796,7 @@
right: -10px;
width: 130px;
height: 100px;
- background: url(background.png);
+ background: url( 'images/background.png' );
background: rgba(50, 50, 50, 0.7);
border: solid 1px transparent;
padding: 10px;
@@ -798,7 +839,7 @@
left: 0;
width: 100%;
height: 100%;
- background: url(background.png);
+ background: url( 'images/background.png' );
background: rgba(50, 50, 50, 0.7);
z-index: 1000;
overflow: hidden;
@@ -811,10 +852,10 @@
position: absolute;
right: 0;
top: 0;
- background: url(background.png);
+ background: url( 'images/background.png' );
background: rgba(50, 50, 50, 0.7);
color: #fff;
padding: 4px;
z-index: 100;
cursor: pointer;
-}
+}
View
1  mediaelement.min.css
@@ -0,0 +1 @@
+.mejs-container{display: block;position: relative;margin: 0;padding: 0;vertical-align: baseline;outline: none;font-size: 100%;background: transparent;border: none;text-decoration:none}.wp-audio-shortcode{}.mejs-container.wp-audio-shortcode{}.wp-video-shortcode{}.mejs-container.wp-video-shortcode{}.mejs-fullscreen{overflow:hidden!important}.mejs-container-fullscreen{overflow:hidden;position:fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 1000}.mejs-inner{}.mejs-mediaelement{}.mejs-layers{}.mejs-controls{}.mejs-clear{}.mejs-mediaelement{position:absolute;top: 0;left: 0;width: 100%;height: 100%}.mejs-mediaelement audio{}audio.wp-audio-shortcode{}.mejs-mediaelement video{}video.wp-video-shortcode{}.mejs-container-fullscreen .mejs-mediaelement,.mejs-container-fullscreen video{width: 100%;height:100%}.me-plugin{position:absolute}.mejs-embed,.mejs-embed body{overflow:hidden;width: 100%;height: 100%;margin: 0;padding: 0}.mejs-background{ position:absolute; top: 0; left: 0}.mejs-layers{}.mejs-poster{position: absolute;top: 0;left: 0;background-size: contain;background-position:50% 50%;background-repeat: no-repeat}:root .mejs-poster img{display:none}.mejs-poster img{margin: 0;padding:0;border: none}.mejs-overlay{ position:absolute; top: 0; left: 0}.mejs-overlay-play{ cursor:pointer}.mejs-overlay-button{position:absolute;top: 50%;left: 50%;width: 100px;height: 100px;margin: -50px 0 0 -50px;background:url( 'images/bigplay.png' ) no-repeat}.no-svg .mejs-overlay-button{}.mejs-overlay:hover .mejs-overlay-button{background-position:0 -100px}.mejs-overlay-loading{position: absolute;top: 50%;left: 50%;width: 80px;height: 80px;margin: -40px 0 0 -40px;background:#333}.mejs-overlay-loading span{display: block;width: 80px;height: 80px;background:transparent url( 'images/loading.gif' ) 50% 50% no-repeat}.mejs-captions-layer{position: absolute;bottom: 0;left: 0;text-align:center;color: #fff}.mejs-captions-layer a{color: #fff;text-decoration:underline}.mejs-captions-position{position:absolute;width: 100%;bottom: 15px;left: 0}.mejs-captions-position-hover{bottom:45px}.mejs-captions-text{padding: 3px 5px;background:rgba(20,20,20,0.8)}.mejs-chapters{position:absolute;top: 0;left: 0;width: 10000px;z-index: 1;-xborder-right:solid 1px #fff}.mejs-chapter{overflow: hidden;position: absolute;float: left;background:#222;border: none}.mejs-chapter-block{display: block;padding: 5px;color: #fff;border-right: solid 1px #333;border-bottom:solid 1px #333;cursor: pointer}.mejs-chapter-block-last{ border-right:none}.mejs-chapter-block:hover{ background:#666}.mejs-chapter-block .ch-title{display: block;white-space: nowrap;text-overflow:ellipsis;margin: 0 0 3px}.mejs-chapter-block .ch-timespan{display: block;white-space: nowrap;text-overflow:ellipsis;margin: 3px 0 4px}.mejs-controls{position: absolute;list-style-type:none;margin: 0;padding: 0;bottom: 0;left: 0;width: 100%;height: 30px;background: #323232}.mejs-controls div{display:block;float: left;margin: 0;padding:0;width: 26px;height: 26px;border: none; font-size:11px; line-height:11px; font-family:Helvetica,Arial}.mejs-button button{display: block;position:absolute;width: 16px;height: 16px;margin: 7px 5px;padding: 0;cursor: pointer;border: none;font-size: 0;line-height: 0;text-decoration:none;background:transparent url( 'images/controls.png' ) no-repeat}.no-svg .mejs-button button{}.mejs-button button:focus{outline:solid 1px yellow}.mejs-playpause-button{}.mejs-play{}.mejs-play{}.mejs-stop{}.mejs-playpause-button button{}.mejs-play button{background-position:0 0}.mejs-pause button{background-position:0 -16px}.mejs-stop button{background-position:-112px 0}.mejs-controls .mejs-time{overflow: hidden;display: block;width: auto;height: 17px;padding: 8px 3px 0;color: #fff;text-align:center;-moz-box-sizing: content-box;-webkit-box-sizing:content-box;box-sizing:content-box}.mejs-time span{display:block;float: left;width: auto;margin: 1px 2px 0 0;color: #fff}.mejs-time .mejs-currenttime{}.mejs-controls .mejs-time-rail{direction: ltr;width: 200px;padding-top:5px}.mejs-time-rail span{display: block;position:absolute;width: 180px;height: 10px;cursor: pointer}.mejs-time-rail .mejs-time-total{margin: 5px;background:#222}.mejs-time-rail .mejs-time-buffering{width:100%;background-image:-o-linear-gradient(-45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255,255,255,0.15)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,0.15)),color-stop(0.75,rgba(255,255,255,0.15)),color-stop(0.75,transparent),to(transparent));background-image:-webkit-linear-gradient(-45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:-moz-linear-gradient(-45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:-ms-linear-gradient(-45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image: linear-gradient(-45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);-webkit-background-size:15px 15px;-moz-background-size: 15px 15px;-o-background-size: 15px 15px;background-size: 15px 15px;-webkit-animation:buffering-stripes 2s linear infinite;-moz-animation: buffering-stripes 2s linear infinite;-ms-animation: buffering-stripes 2s linear infinite;-o-animation: buffering-stripes 2s linear infinite;animation: buffering-stripes 2s linear infinite}@-webkit-keyframes buffering-stripes{from{background-position:0 0}to {background-position:30px 0}}@-moz-keyframes buffering-stripes{from{background-position:0 0}to {background-position:30px 0}}@-ms-keyframes buffering-stripes{from{background-position:0 0}to {background-position:30px 0}}@-o-keyframes buffering-stripes{from{background-position:0 0}to {background-position:30px 0}}@keyframes buffering-stripes{from{background-position:0 0}to {background-position:30px 0}}.mejs-time-rail .mejs-time-loaded{width: 0; background:#3caac8}.mejs-time-rail .mejs-time-current{width: 0; background:#fff}.mejs-time-rail .mejs-time-handle{display: none;position: absolute;top: -2px;width: 10px;margin: 0;background:#fff;cursor: pointer;text-align:center}.mejs-time-rail .mejs-time-float{display: none;position: absolute;top: -26px;width: 36px;height: 17px;margin-left:-18px;color: #111;background: #eee;border: solid 1px #333;text-align: center}.mejs-long-video .mejs-time-rail .mejs-time-float{width:48px}.mejs-time-rail .mejs-time-float-current{display: block;left: 0;margin: 2px;width: 30px;text-align:center}.mejs-long-video .mejs-time-rail .mejs-time-float-current{width:44px}.mejs-time-rail .mejs-time-float-corner{display: block;position: absolute;top: 15px;left: 13px;width: 0;height: 0;line-height: 0;border: solid 5px #eee;border-color:#eee transparent transparent transparent;-webkit-border-radius:0;-moz-border-radius: 0;border-radius:0}.mejs-long-video .mejs-time-rail .mejs-time-float-corner{left:18px}.mejs-fullscreen-button button{background-position:-32px 0}.mejs-unfullscreen button{background-position:-32px -16px}.mejs-controls .mejs-volume-button{position:relative}.mejs-mute{}.mejs-unmute{}.mejs-volume-button:hover{}.mejs-volume-button button{}.mejs-volume-button .mejs-mute button{ background-position:-16px -16px}.mejs-volume-button .mejs-unmute button{ background-position:-16px 0}.mejs-volume-button .mejs-volume-slider{display: none;position: absolute;top: -115px;left: 0;width: 25px;height: 115px;margin: 0;background:#323232;z-index: 1}.mejs-volume-button .mejs-volume-slider .mejs-volume-total{position: absolute;top: 8px;left: 11px;width: 2px;height: 100px;margin: 0;background:#ddd}.mejs-volume-button .mejs-volume-slider .mejs-volume-current{position: absolute;top: 8px;left: 11px;width: 2px;height: 100px;margin: 0;background:#ddd}.mejs-volume-button .mejs-volume-slider .mejs-volume-handle{position: absolute;top: -3px;left: 4px;width: 16px;height: 6px;margin: 0;background:#ddd;cursor: N-resize}.mejs-controls .mejs-horizontal-volume-slider{height: 26px;width: 60px;position:relative}.mejs-horizontal-volume-slider .mejs-horizontal-volume-total{position: absolute;top: 11px;left: 0;width: 50px;height: 8px;margin: 0;padding: 0;font-size: 1px;background:#333}.mejs-horizontal-volume-slider .mejs-horizontal-volume-current{position: absolute;top: 11px;left: 0;width: 50px;height: 8px;margin: 0;padding: 0;font-size: 1px;background:#fff}.mejs-horizontal-volume-slider .mejs-horizontal-volume-handle{ display:none}.mejs-controls .mejs-captions-button{position:relative}.mejs-captions-button button{background-position:-48px 0}.mejs-captions-button .mejs-captions-selector{overflow: hidden;visibility:hidden;position: absolute;bottom: 26px;right: -10px;width: 130px;height: 100px;padding: 10px;background:#323232}.mejs-captions-button .mejs-captions-selector ul{list-style-type:none;overflow: hidden;display: block;margin: 0;padding: 0}.mejs-captions-button .mejs-captions-selector li{list-style-type:none;overflow: hidden;display: block;margin: 0 0 6px;padding: 0;color: #fff}.mejs-captions-button .mejs-captions-selector input{clear: both;float: left;margin:3px 3px 0 5px}.mejs-captions-button .mejs-captions-selector label{float: left;width: 100px;padding:4px 0 0}.mejs-captions-button .mejs-captions-translations{margin:0 0 5px}.mejs-clear{ clear:both}.me-cannotplay a{ color:#fff; font-weight:bold}.me-cannotplay span{ padding:15px; display:block}.mejs-controls .mejs-loop-off button{ background-position:-64px -16px}.mejs-controls .mejs-loop-on button{ background-position:-64px 0}.mejs-controls .mejs-backlight-off button{ background-position:-80px -16px}.mejs-controls .mejs-backlight-on button{ background-position:-80px 0}.mejs-controls .mejs-picturecontrols-button{ background-position:-96px 0}.mejs-contextmenu{ position:absolute; width:150px; padding:10px; border-radius:4px; top:0; left:0; background:#fff; border:solid 1px #999; z-index:1001}.mejs-contextmenu .mejs-contextmenu-separator{ height:1px; font-size:0; margin:5px 6px; background:#333}.mejs-contextmenu .mejs-contextmenu-item{ font-family:Helvetica,Arial; font-size:12px; padding:4px 6px; cursor:pointer; color:#333}.mejs-contextmenu .mejs-contextmenu-item:hover{ background:#2C7C91; color:#fff}.mejs-controls .mejs-sourcechooser-button{ position:relative}.mejs-controls .mejs-sourcechooser-button button{ background-position:-128px 0}.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector{ visibility:hidden; position:absolute; bottom:26px; right:-10px; width:130px; height:100px; background:url( 'images/background.png' ); background:rgba(50,50,50,0.7); border:solid 1px transparent; padding:10px; overflow:hidden; -webkit-border-radius:0; -moz-border-radius:0; border-radius:0}.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul{ margin:0; padding:0; display:block; list-style-type:none!important; overflow:hidden}.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li{ margin:0 0 6px 0; padding:0; list-style-type:none!important; display:block; color:#fff; overflow:hidden}.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li input{ clear:both; float:left; margin:3px 3px 0 5px}.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li label{ width:100px; float:left; padding:4px 0 0 0; line-height:15px; font-family:helvetica,arial; font-size:10px}.mejs-postroll-layer{ position:absolute; bottom:0; left:0; width:100%; height:100%; background:url( 'images/background.png' ); background:rgba(50,50,50,0.7); z-index:1000; overflow:hidden}.mejs-postroll-layer-content{ width:100%; height:100%}.mejs-postroll-close{ position:absolute; right:0; top:0; background:url( 'images/background.png' ); background:rgba(50,50,50,0.7); color:#fff; padding:4px; z-index:100; cursor:pointer}
Please sign in to comment.
Something went wrong with that request. Please try again.