I would like to edit the index.html file that gets outputted by Camtasia in an html5 package. Has anyone had success editing the html to remove the default black page packground and border? I am uploading the html5 package into Canvas and would like the default black page background to be transparent.
- 4 Posts
- 0 Reply Likes
Posted 3 weeks ago
Ben Rhodes, Employee
- 123 Posts
- 51 Reply Likes
You can open up the html file in a text editor and add the following CSS to override the background of the body element.
Save the file and then up load the package to Canvas and you should be all set.
Hope this helps,
Ben
<style type="text/css">You can put this just above the closing </head> tag.
body {
background-color: transparent!important;
}
</style>
Save the file and then up load the package to Canvas and you should be all set.
Hope this helps,
Ben
- 4 Posts
- 0 Reply Likes
Thanks, Ben.
Your suggestion yields the following layout (attached screen shot). Is there another block of code that will also remove the black border?

Your suggestion yields the following layout (attached screen shot). Is there another block of code that will also remove the black border?

(Edited)
Ben Rhodes, Employee
- 123 Posts
- 51 Reply Likes
Try adding:
html, body { border: none; }Inside the <style> element. Note, that border may not be coming from the Camtasia output, but from Canvas itself.
- 4914 Posts
- 2237 Reply Likes
Hey Ben Rhodes
Does this code exist somewhere in our operating system as what I would call a "seed" file? So that if one didn't want to make those changes manually each time you created output, you could modify the seed file so it was just used and already had the code in place?
Cheers... Rick :)
Does this code exist somewhere in our operating system as what I would call a "seed" file? So that if one didn't want to make those changes manually each time you created output, you could modify the seed file so it was just used and already had the code in place?
Cheers... Rick :)
- 1123 Posts
- 903 Reply Likes
I believe those would be here Rick
C:\Program Files\TechSmith\Camtasia 2018\Media\Studio\HTML\SmartPlayer\basic
Template.html
Template_Player.html
Dubie
TechSmith Resources
Support Tutorials Version Downloads ________________________________________________________________________________________
C:\Program Files\TechSmith\Camtasia 2018\Media\Studio\HTML\SmartPlayer\basic
Template.html
Template_Player.html
Dubie
TechSmith Resources
Support Tutorials Version Downloads ________________________________________________________________________________________
(Edited)
- 4 Posts
- 0 Reply Likes
Dubie, where are those Camtasia 2018 html files located on a Mac?
- 4 Posts
- 0 Reply Likes
Ben, I added that extra css and the border is still present. Guess it is Canvas after all. Canvas is also forcing the embedded video into a scrollable window.
Ben Rhodes, Employee
- 123 Posts
- 51 Reply Likes
It sounds like you are using Camtasia 2018 on the mac? Is the entire video showing in the scrollable window? Our output is designed to just fill the size of the window we are given to display in.
If you want to verify where the border is coming from you can use the browser development tools? You'd have to look up how to use those tools yourself.
If you want to verify where the border is coming from you can use the browser development tools? You'd have to look up how to use those tools yourself.
Related Categories
-
Camtasia (Mac)
- 2673 Conversations
- 1060 Followers