Mobile Platform Only Videos

  • Unknown's avatar
    kellybox · Member ·

    I have a set of videos that I need to make visible only to mobile users (they look good on the desktop site, but look giant on the mobile version). I want to have 2 sets of videos – which isn’t a problem, however I want one set to be visible only to mobile viewers (so I can shrink it to a size that looks good on smartphones).

  • kathrynwp · Staff ·

    There is a way to do this but it’ll take a few steps.

    First, wrap your mobile-targetted videos in a div element with a special class added. Example, in your post editor’s HTML view, add something like this:

    <div class="mobilevideo">

<!-- Put your mobile video stuff here -->

</div>

    Then in your custom CSS, you would define the class to hide the contents of anything with that class on a screen size that you define, using a media query.

    Something like:

    /* Hide mobile videos on screens over 960px wide */
@media screen and (min-width: 960px) {
  .mobilevideo {
    display: none;
  }
}

    You choose the width you want to target — it can be different than 960px, depending when you want them to be hidden.

    You would have to do the same for your desktop videos to hide them on small screens, and adding a second the media query for that.

    Have a look at these resources to learn more about using media queries that target certain screen sizes:

    http://en.support.wordpress.com/custom-design/custom-css-media-queries/

    Media Queries for Standard Devices


    http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

    Let me know how it goes.

  • kathrynwp · Staff ·

    look giant on the mobile version

    Also, I’d like to take a look at this directly to see what’s going on. Could you provide a link to the videos that don’t look right on mobile, and let me know what device you looked at them on, i.e. iPhone 6 Plus/Safari, or Android Nexus 7/Chrome?

  • The topic ‘Mobile Platform Only Videos’ is closed to new replies.