Video.js - HTML5 Video Player for WordPress
[resolved] Can this be used in your header (8 posts)

  1. JukeBoxWhiz
    Posted 1 year ago #

    I've been trying to get this video plugin to work in the header. I'm using a weaver ii theme and using html insertion in the header area. I can use the shortcodes or use a div tag with the class="video-js-wrapper" and source the videos.

    Either way, the video shows up in the header and plays fine, but the browser is using it's default player. I am not getting the video.js player. This is a problem for me because the players in FireFox, Opera, Safari and Chrome all use a full screen feature on their control. It's important that my player NOT have that feature.

    I'm using this plugin in the hopes that one of the skins will not have a fullscreen control feature.

    Anyway... is it possible to get this working so you can display video in the header?


  2. Dustin Lammiman
    Plugin Author

    Posted 1 year ago #

    The skin the plugin uses does have a fullscreen button. There is an option to turn all controls off.

    It sounds like you are trying to use the videos in your template file? Try using do_shortcode() or else make sure your html follows the structure here: https://github.com/videojs/video.js/blob/stable/docs/guides/setup.md#step-2-add-an-html5-video-tag-to-your-page

    Edit: I think you could also hide just the fullscreen button using CSS.

  3. JukeBoxWhiz
    Posted 1 year ago #

    I put the structured code you refer to in my header verbatim except for the paths to my video.

    The video shows up, but I only get the browser skin. Not the video.js skin.

    Here is the exact code:

    <video id="example_video_1" class="video-js vjs-default-skin"
    controls preload="auto" width="320" height="240"
    <source src="../WebVideo/alamo-vid.mp4" type='video/mp4' />
    <source src="../WebVideo/alamo-vid.webm" type='video/webm' />
    <source src="../WebVideo/alamo-vid.ogv" type='video/ogg' />

    I changed the width and height, but even before I did that the video showed up in the browser skin and not the video.js skin.

  4. JukeBoxWhiz
    Posted 1 year ago #

    Okay, I hate to be a pain, but I've been playing around and this is what I have found.

    I go to the tinymce editor and use the html insertvideo button. The video shows up in the video-js skin with the big button in the middle. Fine, the problem is it's not in the header but the body of my post section.

    Now, I go into the tinymce editor and copy the code that was inserted. I put that in the header of the template area.

    Now the video shows up in the header WITH THE VIDEO-JS SKIN. But, I also have the video in my posting area.

    I go back again to tinymce and delete that code. Now the video shows up in the header but it is back in the browser skin -- NOT THE VIDEO-JS skin!

    There is no way I can see to edit the code in the header area using the tinymce editor.

    So, I am at a loss.

  5. JukeBoxWhiz
    Posted 1 year ago #

    Okay, I see. After I posted I realized that the javascript and css and swf files must not be loading before the header. So, I inserted the code for all that in the header file also. Now I get the video-js skin in the header the way I want.

    Now I just have to figure out how to hide the fullscreen button.

  6. JukeBoxWhiz
    Posted 1 year ago #

    That was easy. Add this to your css:

    .vjs-fullscreen-control{ display:none; }


  7. Dustin Lammiman
    Plugin Author

    Posted 1 year ago #

    Your issue is a problem that needs to be solved. I'm looking for a solution for the next update - if you want to have input into how we solve this, please see this issue on github: https://github.com/zencoder/video-js-for-wordpress/issues/3

  8. Dustin Lammiman
    Plugin Author

    Posted 11 months ago #

    Resolved in latest update.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Video.js - HTML5 Video Player for WordPress
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic