I have a video on a slide that I would like to have a full screen control. Apparently this is not an option with an imported video. So I tried using a web object linked to an index file containing standard a video tag with controls enabled. The Story is sized to 1280 x 720. The video is 1920 x 1080 but I'm using CSS styles to make the video fit 100% screen width. This works fine outside of Storyline but when published in Storyline the video does not scale to the web object window. It remains 1920 x 1080 and scroll bars appear.
How do I get the video to scale to the web object?
I just did something similar for a client by embedding the VideoJS player within a web object. I'll have to create a generic sample before I can share the project here. Are you able to share a project file that I could try to modify for you?
Yes please. I'm attaching a test file. Also I notice a delay with some black object that appears for a half second before the video loads. Thanks for your help!
Ray, I couldn't get the video tag to view at 100% without Storyline giving the web object scroll bars, so I had to settle for 99%. This left a little white border around the video, which I colored the same as the background with CSS. Try out the attached file as your new web object.
Btw, you may need to embed the video differently if tracking its completion is a requirement. There is a way to make the entire course go full screen, and potentially just the video itself.
If there was a way to apply object-fit="cover" to the web object window... but it's inside Storyline and doesn't look like you can apply attributes to it
Same file I sent you, just published with 360, but not the latest version. I think there was a related issue with the newest version. I'll update and see if I can make it work.
Your published output doesn't contain the index.html that I attached to the above message, so I don't think the web object (edit) DID NOT get updated in your project file. I've attached the project file here.
I'm not sure if any browsers will autoplay videos with sounds anymore. There was a long thread on this on the forum, but I don't see it pinned anymore. I'll look for it and check out the best practice. Support might check in here with the link before I find it.
I think you have to add 'muted' to the attributes, or make them click to start. I'll probably just add an instruction for the learner to click. Thanks.
I think that possibly if the "big play button" from Storyline is displayed at the beginning of the course, then after that is clicked, any media will play normally. Just not exactly sure how to force that to appear. Sure thing, let me know if you need any other help.
Ray, it sounds like the last issue is getting your video to play. Michael is right – many browsers are restricting autoplay of media without first engaging with the content. Chrome has made a few approaches to this restriction over the last year. Here's more detail.
22 Replies
I just did something similar for a client by embedding the VideoJS player within a web object. I'll have to create a generic sample before I can share the project here. Are you able to share a project file that I could try to modify for you?
Yes please. I'm attaching a test file. Also I notice a delay with some black object that appears for a half second before the video loads. Thanks for your help!
Ray, I couldn't get the video tag to view at 100% without Storyline giving the web object scroll bars, so I had to settle for 99%. This left a little white border around the video, which I colored the same as the background with CSS. Try out the attached file as your new web object.
Btw, you may need to embed the video differently if tracking its completion is a requirement. There is a way to make the entire course go full screen, and potentially just the video itself.
Sorry, this didn't work for me. After publishing it still comes up with scroll bars.
Which browser and version are you viewing in? Just trying to replicate what you are seeing.
The latest Firefox, Edge, and Chrome.
How does this look? https://360.articulate.com/review/content/d9d3fe54-8229-4583-ae91-eef4facbbd3a/review
I trimmed your video to upload more quickly.
If there was a way to apply object-fit="cover" to the web object window... but it's inside Storyline and doesn't look like you can apply attributes to it
Looks fine - how did you do it?
Same file I sent you, just published with 360, but not the latest version. I think there was a related issue with the newest version. I'll update and see if I can make it work.
I've updated 360 to the latest version and republished and the output still looks good to me. What version are you using to publish?
https://360.articulate.com/review/content/d9d3fe54-8229-4583-ae91-eef4facbbd3a/review
The latest. I'm also running it from my hard drive. I notice you're uploading to an Articulate review server. How do I do that?
It works running locally for me as well. When you publish, choose the Review 360 tab:
Doesn't work for me. Can you send me your project files to test?
https://360.articulate.com/review/content/6455d98a-e0f6-4ffe-8766-a357ede0acbe/review
Your published output doesn't contain the index.html that I attached to the above message, so I don't think the web object (edit) DID NOT get updated in your project file. I've attached the project file here.
Btw, I wasn't yelling, at first I typed "got updated" instead of "did not get updated"... :)
No problem. Thanks for your help. The HTML Video tag tells it to autoplay but that doesn't happen. Do you have any idea why or how to make it happen?
I'm not sure if any browsers will autoplay videos with sounds anymore. There was a long thread on this on the forum, but I don't see it pinned anymore. I'll look for it and check out the best practice. Support might check in here with the link before I find it.
I think you have to add 'muted' to the attributes, or make them click to start. I'll probably just add an instruction for the learner to click. Thanks.
I think that possibly if the "big play button" from Storyline is displayed at the beginning of the course, then after that is clicked, any media will play normally. Just not exactly sure how to force that to appear. Sure thing, let me know if you need any other help.
Michael, thanks for the spectacular help, here!!
Ray, it sounds like the last issue is getting your video to play. Michael is right – many browsers are restricting autoplay of media without first engaging with the content. Chrome has made a few approaches to this restriction over the last year. Here's more detail.
If you need additional help, please let me know!
This discussion is closed. You can start a new discussion or contact Articulate Support.