Featured Categories
-
Lectora®
Lectora® is the most trusted authoring tool in the world. Rock out your creativity! Author courses any way you like. Lectora adheres to best practices for Accessibility and Web Content Accessibility Guidelines (WCAG), offers responsive authoring for eLearning, and publishes to any LMS (Learning Management System).
-
CenarioVR®
Experience virtual reality through CenarioVR®, our training and virtual reality (VR) authoring software that allows you to create immersive learning in minutes! No coding required!
-
Rockstar Learning Platform®
Our Rockstar Learning Platform® has all the features you’ll love. Help your employees be better at their jobs, more valuable to your company, and most effective in servicing your customers.
-
The Training Arcade®
Level up your learner engagement with the Training Arcade®! The Training Arcade is a library of fun, mobile-ready, casual games that can be rapidly customized with your content to create effective gaming!
-
ELB Learning Content
Did you know that our AssetLibrary™ has over 120 million engaging, interactive, and awe-inspiring templates and assets to help you become an eLearning Rockstar®?
TWO Video Questions

1: Is it possible to have an image thumbnail as opposed to a black screen before the user clicks the play button on the video?
2: When I upload my video I get small black bars on the left and right side of the video. After doing some research I see that its usually because Lectora is adding in the height of the player to the video dimensions. Is there a workaround for this?
Thanks!
Comments
-
For item 1:
To show a poster (thumbnail) image for the video before it starts playing, you can add an image to the title and add a couple of Run Javascript actions (one to image and one to video). Basically, when the page loads it will set the image URL to the "poster" attribute of the video player. The player will then show the image until you play the video.
Note that I only tested with MP4 videos. Also, this will work in published content only - does not work in Run Mode.
Here are the steps:- On the page with the video, add an image that you want to use as poster and make it a very small size. Make sure this image is above the video on the left-hand-pane of the editor so that it will be behind the video when rendered. Also set the opacity to 0 (opacity setting is on Style tab). We just want that image available on the page but not actually show it as an image.
- To that image, add a "Run Javascript" action with trigger "Show" with the following code:
window.myPoster = %HTMLNAME%;
- To the video, add a "Run Javascript" action with trigger "Show" with the following code:
window.myVideo = %HTMLNAME%;
if(myVideo && window.myPoster && myPoster.dCon)
myVideo.mePlayer.poster = myPoster.dCon.src;
- Click on Page Preview (F9) to test it.
If you are using the default controller, Lectora Online should determine the correct video size and you should not see any horizontal or vertical black bars. If you change the controller from the Playback Options tab, you may see black bars since the controller height changes. To fix it go to Position & Size tab and un-check (un-highlight) Maintain Ratio. Then fine adjust the Width or Height as needed.
Robert.0 -
@raungnaing This worked for me initially but now it is not displaying my thumbnail image anymore. Has there been updates to code along that way?
Thanks!0
Categories
- 35.9K All Categories
- 110 ✫ Announcements
- 33.1K Lectora®
- 31.1K Lectora Discussions
- 29K Lectora Desktop
- 2K Lectora Online
- 2K Lectora Feature Requests
- 71 Lectora User Groups
- 27 ELB Learning Content
- 27 ELB Learning Content Discussions
- 343 CenarioVR®
- 204 CenarioVR Discussions
- 139 CenarioVR Feature Requests
- 44 Rockstar Learning Platform®
- 41 Rockstar Learning Platform Discussions
- 108 CourseMill®
- 108 CourseMill Discussions
- 48 ReviewLink®
- 48 ReviewLink Discussions
- 7 The Training Arcade®
- 7 The Training Arcade Discussions
- 938 All Things eLearning
- 39 eLearning Development
- 546 Learning Management System (LMS) Integration
- 333 Web Accessibility
- 1.2K ♪ The Green Room
- 9 Additional Learning Products