WordPress.org

Ready to get started?Download WordPress

Forums

Video.js - HTML5 Video Player for WordPress
[Plugin: VideoJS - HTML5 Video Player for WordPress] Make videos responsive. (7 posts)

  1. miketopher
    Member
    Posted 1 year ago #

    Hello,

    First off I want to say, I've already tried using FitFids JS WP Plugin, I added a class, then i wrapped <div class="resvids"> video js video short codes </div>

    and nothing happened..

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

  2. Dustin Lammiman
    Member
    Plugin Author

    Posted 1 year ago #

    I don't have time to test this right now, and I'm not super familiar with how FitVids works, but you could try adding class="resvids" to the shortcode directly: [video mp4="http://video.mp4" class="resvids"]

    You may also be able to just use basic CSS similar to this in your themes stylesheet to achieve the same thing without javascript:

    video,.video-js, img.vjs-poster {
    	max-width: 100%;
    	height: auto !important;
    }
  3. miketopher
    Member
    Posted 1 year ago #

    The css seems to work,
    but the video seems to not exist in the content area, making the browser thing there is no content, and the content area height is very small, makes the comment box go on top of the video, as well as pushes the video controls up..

    i apply a heigh:600px to #content to fix it but this seems not the right way to go.. any fix for this ?

    Thank you!

  4. Dustin Lammiman
    Member
    Plugin Author

    Posted 1 year ago #

    Does this work any better?

    .video-container {
    	position: relative;
    	padding-bottom: 74.25%; /* 4/3 ratio */
    	padding-top: 30px; /* IE6 workaround*/
    	height: 0;
    	overflow: hidden;
    }
    
    iframe,object,embed,video,.videoWrapper,.video-js {
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    }
    
    .video-js, img.vjs-poster {
    	width: 100% !important;
    	height: 100% !important; //these need !important because IE wants to set height/width to 100px
    	max-width: 100%;
    }

    Your shortcode would have to be in a div with the class 'video-container'. No guarantees it will work as I just copy and pasted from a recent site of my own, but it should be a good starting point hopefully.

  5. miketopher
    Member
    Posted 1 year ago #

    hm. i tried it but theres a huge white thing covering the majority of the page now so i couldnt tell

  6. BSK
    Member
    Posted 1 year ago #

    been having the same issue here.

    tried this fix but it didn't work 100% (it's for video.js if you were using it outside of this wordpress plugin version).

    http://www.hexagonwebworks.com/2012/responsive-videos-updated/

    noticed in the styles posted above, they reference .videoWrapper, but this class is not evident in the structure of the code that the wp plugin spits out.

    guessing the .videoWrapper element is just the div that wraps around the player, but in firebug it's showing me the "wrapper" as

    <div style="width: 300px; height: 150px;" height="150" width="300" class="video-js vjs-default-skin vjs-playing" id="1">

  7. BSK
    Member
    Posted 1 year ago #

    i tried adding <div class="videoWrapper"> around my shortcode (as they mention in the link I posted above - duh), and it works!

    make sure you play with padding-bottom on .videoWrapper in the css if you get black bars on the top or sides.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags