Skip to main content
C
Contentbee
Inspiring
October 17, 2017
Question

HTML5 project only in landscape view? (delete breakpoints?) Cap.9

  • October 17, 2017
  • 3 replies
  • 2759 views

Hi,

is there a way to set a HTML5 project only in landscape views - desktop, tablet landscape, mobile landscape?

We are going to add a snippet to inform users to change their device to landscape view, because of 16:9 ratio videos. So for this I´d like to get rid of the standard portrait breakpoints and set only landscape. I´ve thought of setting the portrait sizes to match a landscape dimension, but I´m not sure if the device detection might get in trouble with this 😉

Any idea how to get "landscape only"?

I´m using Captivate 9.

This topic has been closed for replies.

3 replies

TLCMediaDesign
TLCMediaDesign
Inspiring
December 14, 2017

You can add this CSS

#cpMainContainer { display:block; }

@media only screen and (orientation:portrait){

  #main_container {

    height: 100vw;

    -webkit-transform: rotate(90deg);

    -moz-transform: rotate(90deg);

    -o-transform: rotate(90deg);

    -ms-transform: rotate(90deg);

    transform: rotate(90deg);

  }

}

@media only screen and (orientation:landscape){

  #main_container {

     -webkit-transform: rotate(0deg);

     -moz-transform: rotate(0deg);

     -o-transform: rotate(0deg);

     -ms-transform: rotate(90deg);

     transform: rotate(90deg);

  }

}

floriank38625530
floriank38625530
Known Participant
December 14, 2017

@Rod: You are right. I use scalable HTML5 in 16:9 ratio for my videos too. I also provide fullscreen mode (only works for android and desktop), so therefore it would be nice when I got a solution to fit at 18:9 and 16:9 ratio for the future.

@TLCMediaDesign

can you explain the CSS a little bit more. You are in non-responsive mode, right? Not sure how and in which szenario this should work. Can I combine this with my JavaScript go to fullscreen action? Or do I have to insert it into assets/css...?

Greetings

Flo

TLCMediaDesign
TLCMediaDesign
Inspiring
December 14, 2017

You can add it to the head of the html page, make sure you surround it in <style></style> tags.

If on a mobile device it will always be in landscape to matter the devices orientation, normal on desktop.

Paul Wilson CTDP
Paul Wilson CTDP
Community Expert
December 13, 2017

Just use a non responsive design project (Blank project) and publish it with HTML scaling turned on. This will force a landscape view on any device. Keep in mind you may end up with blank space on either side for iPads as they use a 4:3 aspect ratio instead of 16:9. 

Paul Wilson, CTDP
floriank38625530
floriank38625530
Known Participant
December 14, 2017

Hi Paul,

of course thats a solution, but I think its not what Contentbee was asking for. The state of the art and what users expect is that the costum UI fits to any device ratio. Also the UX will increase. And especially  slide video content make no sense to display in portrait mode.

In Storyline, while you set the settings for HTML5 export, you can set an option to force landscape mode. So thats very easy in that tool, in Captivate there isn't that option and we have to find solutions on our own to get the similiar user experience compared to any other video player, for example.

Greetings

Flo

RodWard
RodWard
Community Expert
December 14, 2017

I have to say that I tend to agree with Paul on this one.  What he suggested is the same thing I was thinking of posting when I saw he'd already done it.

What might be regarded as "state of the art" in any industry is not necessarily always the best solution for a given situation.  And "what users expect" isn't always the most practical way to fulfil their actual needs either.  There are in fact quite a few situations and types of e-learning content that are NOT practical to develop in responsive output.  Anything heavily dependent on software screenshots or containing large amounts of landscape oriented video content will usually be seen at its best using just good old Scalable HTML5.

What Storyline's marketing refers to as "responsive" output from their product is in fact little more than what Captivate calls Scalable HTML5, which is normally Landscape anyway.  It doesn't reorganise and reposition objects on the screen layout to accommodate the differences between portrait and landscape viewports. Captivate's breakpoint-based output or fluid boxes by contrast DO actually do this and are therefore truly responsive.

You are correct that it makes no sense to display video content in Portrait mode because video is almost always Landscape (unless it was captured with a mobile phone in Portrait orientation).  And anyone that doesn't know how to turn their Smart Phone on its side to better view landscape video content is...well..obviously not familiar with the technology.

floriank38625530
floriank38625530
Known Participant
December 13, 2017

Hi Contentbee,

I'm struggeling with a similiar problem but I'm using Captivate 2017 responsive project. But maybe my thoughts could help you too?

I don't think that it is possible to show only the landscape mode, so for that you can try to put a blank solid shape on top of the slide, which says to rotate the device.

With Captivate 2017 the handling with the responsive design is not the same. Here I try to figure out the ratio of the screenwidth and screenlength via javascript. When the ratio says it is portrait mode then you can show a solid shape too with an advanced action. I suggest to work with "while" loop and to execute the advanced action by entering the first slide.

The problem I have now, is that the advanced action isn't execute all the time. So when I see the solid which says that the user should turn the devices into landscape mode nothing happens. So I think there is a problem with my "while" loop.

Greetings

Flo

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices