Make Video Player Responsive

Discussion in 'aMember Pro v.4' started by rmpostraining, Oct 29, 2013.

  1. rmpostraining

    rmpostraining New Member

    Joined:
    Oct 25, 2013
    Messages:
    21
    Just reviewing my site on an ipad. I am using video protection with the integrated video player. Videos stored on s3.

    It is possible to make the video script be responsive? I saw that you can set the default size in the amember config options. Tried entering % and em's in there which didn't work. It would seem that amember is configure to only accept straight px values in this field.

    I also tried to manually add the video % and em's to the end of the video script as shown in the example which also still reverted to straight px values.

    Am i missing something or is this not currently an option?
  2. alexander

    alexander Administrator Staff Member

    Joined:
    Jan 8, 2003
    Messages:
    6,274
    Unfortunately this is not an option currently.
  3. rmpostraining

    rmpostraining New Member

    Joined:
    Oct 25, 2013
    Messages:
    21
    Is anything possible with css or php? To just set say three static sizes based on screen size?
  4. rmpostraining

    rmpostraining New Member

    Joined:
    Oct 25, 2013
    Messages:
    21
    Well I have to say where there is a will there is a way. I am using amember with Wordpress integration and I got all of my videos to be responsive. Here is how I made it work. First I added this to my wordpress css file.
    Code:
    .video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
    overflow: hidden;
    }
    
    Along with this
    Code:
    #div-am-video-10, #div-am-video-11, etc... {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    }
    
    I take no credit for the above code. I found this after some google-fu.

    After I had all of this in place I wrapped the video script from amember in the video container div like this
    Code:
    <div class="video-container">
    <script type="text/javascript" id="am-video-10"
        src="http://www.yoursitehere.com/amember/video/js/id/10"></script>
    </div>
    
    And presto all of the videos on my site are responsive. The only downside is every time I add a new video I have to update my css file to include the new am-video-xx reference. Not sure if there is a css way to make this apply to every video regardless of the -xx number but this I have working for now.
  5. thehpmc

    thehpmc aMember Pro Customer

    Joined:
    Aug 24, 2006
    Messages:
    901
    Can you not change '#div-am-video-10, #div-am-video-11' to just '#div-am-video'?
  6. rmpostraining

    rmpostraining New Member

    Joined:
    Oct 25, 2013
    Messages:
    21
    I wish there was some way to do this. I just tried and it did not work. For some reason you have to have the whole thing. Unless there is some way to say match every element that starts with #div-am-video. I think this is the way it has to work.
  7. robw

    robw CGI-Central Partner

    Joined:
    Dec 18, 2007
    Messages:
    269
    Using your code, the following should work:

    HTML:
    .video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
    overflow: hidden;
    }
     
    .video-container + script {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    }
    
    See: http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors
  8. rmpostraining

    rmpostraining New Member

    Joined:
    Oct 25, 2013
    Messages:
    21
    Was worth a shot but a no go.
  9. robw

    robw CGI-Central Partner

    Joined:
    Dec 18, 2007
    Messages:
    269
    Ah, yes, sorry, I just remembered that the javascript creates its own a tag with the div id...
    So this should work instead:

    HTML:
    .video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
    overflow: hidden;
    }
     
    .video-container > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    }
    See: http://www.w3.org/TR/CSS2/selector.html#child-selectors
    rmpostraining likes this.
  10. rmpostraining

    rmpostraining New Member

    Joined:
    Oct 25, 2013
    Messages:
    21
    This totally works. :) Thanks robw. This will make adding more video content in the future much easier. One less step in the process.

    HTML:
    .video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
    overflow: hidden;
    }
     
    .video-container > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    }
  11. guy1

    guy1 Member

    Joined:
    Aug 29, 2006
    Messages:
    129
    HI all, so you are just adding that last code to your Wordpress theme css?

    I tried but it didnt make a difference. This is supposed to be fixed in the Amember video player settings but it doesnt work for smartphones for some reason n my experience.
  12. rmpostraining

    rmpostraining New Member

    Joined:
    Oct 25, 2013
    Messages:
    21
    Guy1,

    Yes, You have to add this code
    Code:
    .video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
    overflow: hidden;
    }
     
    .video-container > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    }
    
    to your css file and then wrap the amember video script in the div class like this
    Code:
    <div class="video-container">
    <script type="text/javascript" id="am-video-10"
        src="http://www.yoursitehere.com/amember/video/js/id/10"></script>
    </div>
    
  13. guy1

    guy1 Member

    Joined:
    Aug 29, 2006
    Messages:
    129
    Thanks eno but I don't understand where to find the amember video script? Is it part of a file somewhere ?

    I am adding videos via the video player plugin and I've set them up to appear in each user's account as help guides.
  14. guy1

    guy1 Member

    Joined:
    Aug 29, 2006
    Messages:
    129
    Eno? Sorry that's a typo. I was responding to rmpostraining.
  15. rmpostraining

    rmpostraining New Member

    Joined:
    Oct 25, 2013
    Messages:
    21
    Hmm. I am not sure where the videos play when they are appearing in the account. I made a "page" with my videos and then used the video script. If you go to the video section under protect content there is a JavaScript Code filed which you can expand to see the amember video script.

    Since I added a page to my wordpress site which is integrated I used this script to put the video on that page.

    If you are using the wordpress integration you could create a help page and use the video script to put the help videos on that page. Using the above mentioned code they would be responsive.

    No idea on the users account or other amember pages through as I am using this method on a wp-page with the amember wp integration plugin
  16. guy1

    guy1 Member

    Joined:
    Aug 29, 2006
    Messages:
    129
    Ok thank you
  17. laoniu

    laoniu New Member

    Joined:
    Mar 14, 2014
    Messages:
    6
  18. 123Marketing

    123Marketing aMember Pro Customer

    Joined:
    Jun 4, 2005
    Messages:
    130
    I tried this code. Thank you for it...

    My problem is the border scales properly, but not the video itself. When the screen is scaled to Smartphone size, only a tiny portion of my video displays...

    Yet when I try using an iframe to a YouTube video - it works perfect.

    Any ideas to have the video AND border scale using the built-in Flowplayer?

    Edit: My video is 1280x720.
  19. rmpostraining

    rmpostraining New Member

    Joined:
    Oct 25, 2013
    Messages:
    21
    Hey 123Marketing,

    I updated to a more recent version and remember having some trouble with the video staying the same size. Checked the custom css on my site and found what is below. The background color and text align for sure are not necessary but the important thing I think is .video-container a instead of .video-container > a like my previous post. You still have to wrap the video script in the video container div as before. I do not think the video size would matter. It should scale regardless.
    Code:
    .video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
    overflow: hidden;
    background-color: #EAEAEA;
    text-align: center;
    }
    .video-container a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    }
    

Share This Page