I’m using Active Presenter 8 ; licensed; Version 8.5.1 - 64-bit build. (Released: 2021.08.10)
I am not posting any of my mp4 videos on facebook or utube. Nothing external. All internal company sites.
I want to put a thumbnail of a play button. So when i post it, they’ll see the play button and click it. But when I go to Advanced tab on export Video and select an image, it does not show up. I see other responses where this won’t work. But I also see facebook and utube responses. I’m not using either. Are there specific steps that someone can give me to create a thumbnail so when I post it, they’ll see that image first?
Hi Terri,
The thumbnail option only works when you select the Embedded in HTML option and upload all files in the exported folder (see the below screenshot) to your web server:
If you use other players or methods, they should provide a method for selecting the thumbnail.
Please let me know if you have any questions.
Regards,
Thank you for the quick reply.
I’m not posting the video on a webserver. I’m trying to post it on a Confluence page (Atlassian). It’s widely used here. I’ve tried to upload the video to Confluence, but the video is too large. So my only other option is to embed html macro. I’ve been searching for the html code through google search. No good matches. Everything talks about uploading the video, which I can’t do, due to the size. However, I did find the code below and I changed the “href” reference to my video. It works, but it’s a pulsing play button. I can include this code as HTML in Confluence. I’m still trying to understand how to get it stop pulsing and just show a play button. I also tried to just include html code found on the internet, but it doesn’t work. I think it has something to do with the “kind” of code I’m using below. Not sure what that is (html??).
Anyway, thanks for looking into this. Any advice is greatly appreciated.
body { background: #444; } .play-btn { width: 100px; height: 100px; background: radial-gradient( #0170BC 60%, rgba(255, 255, 255, 1) 62%); border-radius: 50%; position: relative; display: block; /*margin: 100px auto; */ box-shadow: 0px 0px 25px 3px #0170BC; } .play-btn:hover { width: 100px; height: 100px; background: radial-gradient( #00A9E0 60%, rgba(255, 255, 255, 1) 62%); border-radius: 50%; position: relative; display: block; box-shadow: 0px 0px 25px 3px #0170BC; } .play-btn:active { background-color: #0170BC; box-shadow: 0 5px #666; transform: translateY(4px); } /* triangle */ .play-btn::after { content: ""; position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-40%) translateY(-50%); transform: translateX(-40%) translateY(-50%); transform-origin: center center; width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 25px solid #fff; z-index: 100; -webkit-transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19); } /* pulse wave */ .play-btn:before { content: ""; position: absolute; width: 150%; height: 150%; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation: pulsate1 2s; animation: pulsate1 2s; -webkit-animation-direction: forwards; animation-direction: forwards; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: steps; animation-timing-function: steps; opacity: 1; border-radius: 50%; border: 5px solid rgba(255, 255, 255, .75); top: -30%; left: -30%; background: rgba(198, 16, 0, 0); } @-webkit-keyframes pulsate1 { 0% { -webkit-transform: scale(0.6); transform: scale(0.6); opacity: 1; box-shadow: inset 0px 0px 25px 3px rgba(255, 255, 255, 0.75), 0px 0px 25px 10px rgba(255, 255, 255, 0.75); } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; box-shadow: none; } } @keyframes pulsate1 { 0% { -webkit-transform: scale(0.6); transform: scale(0.6); opacity: 1; box-shadow: inset 0px 0px 25px 3px rgba(255, 255, 255, 0.75), 0px 0px 25px 10px rgba(255, 255, 255, 0.75); } 100% { -webkit-transform: scale(1, 1); transform: scale(1); opacity: 0; box-shadow: none; } }I got it working. For anyone else who has this issue, upload to confluence a jpg or png image and copy the address. Once you have that, you can add “img src” to your macro right after the href address. It will look something like: img src=“https://confluence.site.address/download/thumbnails/490967927/blue-play-button.png” width=“100” height=“100”
Thanks for sharing the tip, Terri.