Version 12: Responsive Design enhancement needed!
Author: Peter W.I am currently trying to convert my website for responsive design.
There seems to be one important feature missing and I hope this can be added quickly.
In step 3, you can use the "Responsive" button to control which elements are displayed at different viewports.
Currently, you can select which elements are to be hidden for the current and lower viewports. This should be changed so that you can select which elements are hidden at each respective viewport only, allowing it to be shown or hidden individually at each viewport size.
This would allow you to define specific elements that are ONLY shown at the desired resolution.
Example: I want to embed a YouTube video using custom code in a html object at full screen width.
That means, I have an html unit that is shown full width (e.g. 960x540) at desktop resolution. This object is therefore defined to only display in desktop mode.
At a width of 720, a different object is used is used that shows the same video at 712x400 and only at that resolution.
Similarly, a further object is defined for a width of 600 using a video at 560x315
At lower resolutions, an image is to be displayed instead.
Unfortunately, the current system will not let me do this. All I can do now is use a video that is at say 560x315 for all resolutions of 600 or above. I can hide it at lower resolutions, but not replace it with an image as otherwise that image will appear at all resolutions.
I cannot use the video object as I need to define subtitles, etc. which are not supported by the Video and Audio object.
I hope I have described it well enough. Making this change would vastly improve the control of what is shown at each resolution.
The test version of the website I am working on can be found here:
http://www.startreknewvoyages.de/en/test/
Author
At least for YouTube videos, I have found a way of making embeded YouTube videos responsive. For those that find this, here is what to do:
In step 3, insert an HTML Code object.
Insert the embed code surrounded by a div container:
<div class="video-container">
<iframe width="996" height="560" src="https://www.youtube.com/embed/Xtg4Y6FWk9M?hl=en&cc_lang_pref=en&cc_load_policy=1" frameborder="0" allowfullscreen></iframe>
</div>
This example also forces English subtitles on.
Now click on the Expert tab.
Under CSS Code, insert the following:
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Close the HTML Code object and the video should now be recursive.
You can see this code working here (Scotty video):
http://www.startreknewvoyages.de/en/test/
Author
P.S. You need to set the automatic height option as well (bottom of HTML Object)