Scaling and web objects

Since last update we have been having serious problems with web objects. Before the last update the web objects where scaled according to browser size but now the web objects don't scale at all leaving either a scrollbar or a cropped image. (See image)

We are dependant on the use of web objects so this is a big problem with no apparent fix. So my question is if this is a permanent change in scaling that we have to take into account, and if so should we make plans for a rollback?
Since this is a critical function for our production we need to look at what our options are, and would request some input in this.

34 Replies
Mark Rash

I actually have the opposite problem: I'd like the option to disable scaling on a specific web object. The web objects I build tend to be based on Bootstrap, so they are designed to be responsive by their nature. I'd rather just let Bootstrap take care of the layout without applying the CSS transform property, because doing that introduces grid lines around certain objects in my web object. Even without that undesired effect, I'd still rather just let the web object itself take care of responsive layout. Is this possible?

Mark Rash

In answer to my own question, I figured out how to get the published Storyline project to not scale a web object at all. This is useful if the web object you are using is built in Bootstrap or another responsive design where you'd rather the scaling not change. If there's a better way to do this, I'm not sure, but I added a few lines of CSS in the output story.html file to fix this in my situation:

.webobject { transform: scale(1)!important; width:100%!important; }
.webobject iframe { width:100%!important; }

I don't like to rely on "!important" unless necessary, but it does the trick in this case.

The above code gets added into the <style> tag of the story.html file in the published project, which of course means that it has to be redone each time the project is published.

Paul Colby

I had this same issue. I created a course last year with an embedded web object that plays a video. It worked fine as far as scaling. This year, I open the same course, republish, the video no longer scales. Should I waste my time going back and forth with Storyline? No! Here is my solution. In the index.html file for the web object that I am inserting into my project, I use the code below. Replace width and source with your video and you should be good to go. Still more testing needed, but so far, so good.

Thanks for nothing Storyline. People have been complaining about this issue for years. Yes, the issue exists. Fix it!

----------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
video {
width: 100%;
height: auto;
}
</style>
</head>
<body>

<video width="960" controls>
<source src="003A_1_Bonding-Resistance-Test.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>

</body>
</html>

Katie Riggio

Happy Tuesday, everyone!

Update 10 for Storyline 3 is live: We fixed the issue where the size of Web Objects would increase.

Let us know if you have any questions, either in this discussion or by reaching out to our Support team directly!