Support » Plugin: Video.js - HTML5 Video Player for WordPress » Can this be used in your header

  • Resolved JukeBoxWhiz

    (@jukeboxwhiz)


    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?

    https://wordpress.org/plugins/videojs-html5-video-player-for-wordpress/

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Dustin Lammiman

    (@nosecreek)

    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.

    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″
    data-setup='{“example_option”:true}’>
    <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’ />
    </video>

    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.

    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.

    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.

    That was easy. Add this to your css:

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

    Done!

    Plugin Author Dustin Lammiman

    (@nosecreek)

    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

    Plugin Author Dustin Lammiman

    (@nosecreek)

    Resolved in latest update.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Can this be used in your header’ is closed to new replies.