WordPress.org

Ready to get started?Download WordPress

Forums

Plugin that only shows info on mobile device? (4 posts)

  1. fdprod
    Member
    Posted 10 months ago #

    Hey everyone,

    I've been searching the web with no luck. Does anyone know of a plugin that shows certain embed codes only on mobile devices and excludes the embed from desktop devices?

    If not a plug in, then maybe a line of code that would accomplish this?

    Basically, I want to have a video only show up when it's viewed on a mobile device and not be in the post when it is viewed on a desktop. Make sense?

    Any advice is appreciated. Thanks.

  2. WPyogi
    Volunteer Moderator
    Posted 10 months ago #

    You can use media queries in CSS to do that -

    https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

  3. fdprod
    Member
    Posted 10 months ago #

    Thank you for the link. I'm as CSS savvy as I probably should be. My eyes started to glaze over with all the info.

    Would I add the line of code to the CSS file and then add a short code to each post for the video to appear? Could you help me with a basic breakdown of how I would accomplish this?

    Thanks again.

  4. WPyogi
    Volunteer Moderator
    Posted 10 months ago #

    There's a lot of more complicated things you can do (as that page referenced) but the most simple is based on width of browser window. Lots of responsive themes (including twentytwelve) use these. This CSS would hide the video (inside a div with the id of "myvideo") if the browser window is wider than 600px:
    CSS - in the CSS file:

    /* Minimum width of 600 pixels. */
    @media screen and (min-width: 600px) {
    	#myvideo {
    	   display: none;
    	}
    }

    HTML :

    <div id="myvideo">
    video code goes here
    </div>

    Note that older versions of IE won't read media queries, so you may need a work around for that if you care.

Reply

You must log in to post.

About this Topic