0

For a current project that i am working i encountered a small issue.

I have a video that needs to be played in a lightbox on desktop, and on mobile to load directly from the source. I am currently building the website with wordpress and am using a shotcode plugin to display the lightbox with.

I guess i have to make a media specific call for mobile devices and let the specific div behave differently on mobile..

Can anybody give me some pointers and help or an example how i could possibly fix this?

user3219418
  • 3
  • 2
  • Try the below link http://stackoverflow.com/questions/16520186/how-to-detect-tablet-mobile-desktop-tv-using-javascript – Devjit Mar 04 '14 at 09:30
  • Great i tried to resolve my problem with specific media queries and it works. I added two queries in my css and added two div's in the mobile version i am displaying on and hiding the other and for desktop the complete other way allround. – user3219418 Mar 04 '14 at 10:24

1 Answers1

1

Let's say you have a link to open the modal on desktop. This link can be hidden on mobile with the help of media-queries (i'm using some example classes here to illustrate the working):

<a href="#modalWindow" class="show-on-desktop">Open video in modal window</a>

The link shouldn't show up on mobile devices, since you want the content displayed right away. For the video you could use something like this:

<div class="hidden-on-desktop" id="modalWindow">Video here</div>

On the desktop this div should act like a hidden, modal window and on mobile it displays the content. You should style the modal window in a specific media-query since you don't want the content to be displayed like a modal on mobile devices.

Hope this helps a bit :)

MysticEarth
  • 2,646
  • 4
  • 33
  • 53