Tweaking the smart player with CSS.

  • 1
  • Question
  • Updated 2 months ago
Hi there, 

I've seen a lot of frustration at the removal of customisable options for the smart player in Camtasia 2019. 

I've had some success editing the css to get the player to do what I need. So far I have managed to remove the auto-hide function so the play bar remains on the whole video (I have a mac so can't do this in export settings).

Now, I would like to make the player smaller if possible. When I play the video on a phone the player takes up almost a third of the screen!

Does anyone have any work arounds to make the player smaller in any way?

Thanks guys!
Photo of sunnyspellz

sunnyspellz

  • 7 Posts
  • 0 Reply Likes

Posted 2 months ago

  • 1
Photo of Dubie

Dubie

  • 1459 Posts
  • 1184 Reply Likes
The biggest problem with the smartplayer html file/page is the coding is messed up and does not resize properly for mobile.

I have posted about this a few times here in the forum yet Nothing has changed.

I just did a post not to long ago to another user that may help you also.

There is a zip download I offered in that post for a alternate html file to use and a css page to style it.

It looks just like the smartplayer page that gets produced in a Camtasia project but is responsive and resizes nicely.

You can change the size of the video if you want in the CSS file but you don't need to as it will scale fine.

Here is the thread and the posts I made if you are interested.

https://feedback.techsmith.com/techsmith/topics/how-to-make-embeded-video-responsive


Dubie:)


Photo of sunnyspellz

sunnyspellz

  • 7 Posts
  • 0 Reply Likes
Hi Dubie, 

Thanks for your swift reply and your instruction. I have downloaded the .zip file you mentioned and am trying to follow the steps. I'm pretty new to this, so would appreciate some pointers. 

I have been sharing my project as a local file which gives me an 'index.html' link where I can play the interactive video locally. 



Your instructions say to navigate to 'yourvideo.html', but the only way I can produce such a file is if I share the project and select 'Include SCORM'. Is this correct?



The problem here is that when I do it this way, I can't seem to locally preview my video any more.

Any advice would be much appreciated.


D
Photo of Dubie

Dubie

  • 1452 Posts
  • 1174 Reply Likes
Hi sunnyspellz

OK so I'm on a Windows machine but this should be what you need to do.

In your first image of your files there are two .html file

Replace the file named index.html with the index.html file of mine that you downloaded.
Also make sure to also add the CSS file in with the rest of your files.



Try this with a test production to see that it works out and always work with COPIES
of a important production.

I haven't used SCORM but in your second image this would be the yourvideo.html file I refer to for example.



I have a video of the process that I need to upload again because I moved some files around on my server. I'll try to post a link for it later today.

If you have questions, or get it working, please let me know.


Dubie:)
(Edited)
Photo of sunnyspellz

sunnyspellz

  • 7 Posts
  • 0 Reply Likes
Hi Dubie, 

Thanks for this - I managed to get it working so that the video now resizes properly when I change the size of my window. 

Maybe I didn't explain clearly enough at the start, but the problem I am still having is that the play controls takes up too much of the screen when played on a phone (or in a smaller browser window). 

I think I referred to this as the player before so I appreciate that may not have been clear. 

Is there any way to scale down the play controls as the video itself is scaled down?

Cheers,
D
Photo of Ben Rhodes

Ben Rhodes, Employee

  • 280 Posts
  • 116 Reply Likes
We currently do not have any easy way to reduce the size of the controls. We have designed the UI to be a minimum size to work well on touch screens / mobile devices.  The controls should autohide while the video is playing so they do not cover the video.  Are you seeing this behavior?

Thanks,
Ben
Photo of sunnyspellz

sunnyspellz

  • 7 Posts
  • 0 Reply Likes
Hi Ben.

Yes, the autohide function is working but every time the user taps the screen to interact with the video, the player pops up and takes up a large part of the screen. 

You say you currently do not have an easy way to reduce the size, so I suppose it is possible to make the player smaller. 

Could you point me towards some instructions that would outline how to reduce the size? 
Photo of Ben Rhodes

Ben Rhodes, Employee

  • 280 Posts
  • 116 Reply Likes
We currently do not supply instructions on how modify the player.  It would involve changing the CSS and possibly the JavaScript around the player.  When we ship new versions of the Smart Player this CSS and JavaScript could change drastically depending on what feature or bug fix we release.

Ben
Photo of Ben Rhodes

Ben Rhodes, Employee

  • 282 Posts
  • 119 Reply Likes
Thanks for the feedback.  Just an update, I'm actively working on improving how we embed Smart Player for local and SCORM productions.  The end result will be a page that scales the video much better for smaller screens.  I do not have a date when this work will ship, but I'm hoping it will make it out in an update to Camtasia 2019 in the near future.

Ben
(Edited)