You are here

THEMING.txt in Video.js (HTML5 Video Player) 7

Same filename and directory in other branches
  1. 6 theme/THEMING.txt
Note that this CSS is NOT a good thing to leave as-is and should almost
definitely be overridden in your theme. Rather than leaving the videojs.css
file loading normally and then overriding it in your theme's style.css file,
you should override the entire file with the following process.

1) Copy videojs.css from videojs/theme/videojs.css to your theme's directory.

2) Open up your theme's .info file and add the line:

   styles[] = videojs.css

   Placing this file in a subdirectory will work also if you prefer not to have
   CSS files in the root of your theme directory.

3) Clear your Drupal caches at http://example.com/admin/settings/performance.
   Now your theme's videojs.css file will be loaded and the original one
   provided by videojs module will be ignored. Make any changes necessary to
   the videojs.css file within your theme.

Note that the default HTML output of videojs module is a standard template that
other "skins" may work with. It is highly suggest to not override the
videojs.tpl.php file and instead build all your custom theming on top of the
default HTML through CSS.

How to use existing CSS Players
-------------------------------
We have predefined themes for this player same like Youetube, Vimeo and Hulu
to active that player what you need to do is just go to line 7
<div class="video-js-box" id="<?php print $player_id; ?>">
and change the class attributes to as below
<div class="video-js-box vim-css" id="<?php print $player_id; ?>">
for Vimeo.

Our predefined presets are
  * Youtube : tube-css
  * Vimeo : vim-css
  * Hulu : hu-css

File

theme/THEMING.txt
View source
  1. Note that this CSS is NOT a good thing to leave as-is and should almost
  2. definitely be overridden in your theme. Rather than leaving the videojs.css
  3. file loading normally and then overriding it in your theme's style.css file,
  4. you should override the entire file with the following process.
  5. 1) Copy videojs.css from videojs/theme/videojs.css to your theme's directory.
  6. 2) Open up your theme's .info file and add the line:
  7. styles[] = videojs.css
  8. Placing this file in a subdirectory will work also if you prefer not to have
  9. CSS files in the root of your theme directory.
  10. 3) Clear your Drupal caches at http://example.com/admin/settings/performance.
  11. Now your theme's videojs.css file will be loaded and the original one
  12. provided by videojs module will be ignored. Make any changes necessary to
  13. the videojs.css file within your theme.
  14. Note that the default HTML output of videojs module is a standard template that
  15. other "skins" may work with. It is highly suggest to not override the
  16. videojs.tpl.php file and instead build all your custom theming on top of the
  17. default HTML through CSS.
  18. How to use existing CSS Players
  19. -------------------------------
  20. We have predefined themes for this player same like Youetube, Vimeo and Hulu
  21. to active that player what you need to do is just go to line 7
  22. and change the class attributes to as below
  23. for Vimeo.
  24. Our predefined presets are
  25. * Youtube : tube-css
  26. * Vimeo : vim-css
  27. * Hulu : hu-css