Editing outputted Camtasa index.html file

  • 1
  • Question
  • Updated 3 weeks ago
  • 1
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.
Photo of Benjamin

Benjamin

  • 4 Posts
  • 0 Reply Likes

Posted 3 weeks ago

  • 1
3 weeks ago
Photo of Ben Rhodes

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.

<style type="text/css">
body {
  background-color: transparent!important;
}
</style>
You can put this just above the closing </head> tag. 
Save the file and then up load the package to Canvas and you should be all set.

Hope this helps,
Ben
3 weeks ago
Photo of Benjamin

Benjamin

  • 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?


(Edited)
3 weeks ago
Photo of Ben Rhodes

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.
2019-01-25T20:22:58+00:00
Photo of Rick Stone

Rick Stone

  • 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 :)
2019-01-25T22:44:22+00:00
Photo of Dubie

Dubie

  • 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 ________________________________________________________________________________________
(Edited)
2019-01-25T23:03:56+00:00
Photo of Benjamin

Benjamin

  • 4 Posts
  • 0 Reply Likes
Dubie, where are those Camtasia 2018 html files located on a Mac?
2019-01-25T23:06:00+00:00
Photo of Benjamin

Benjamin

  • 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.
2019-01-26T15:04:58+00:00
Photo of Ben Rhodes

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.
  • 1

Powered by Get Satisfaction