Exporting a responsive smart player video

  • 2
  • Question
  • Updated 1 month ago
How do you, or is it even possible, to export a smart player video that is responsive? I need to export a video that is desktop/laptop and mobile friendly. It is expetced behavior that a smart player video in a desktop browser will not resize when the browser window is adjusted?
Photo of Benjamin

Benjamin

  • 6 Posts
  • 0 Reply Likes

Posted 1 month ago

  • 2
Photo of Benjamin

Benjamin

  • 6 Posts
  • 0 Reply Likes
Sorry, I meant to ask if it IS expected behavior to not be able to resize the smart player window in a web broswer. 
Photo of Ben Rhodes

Ben Rhodes, Employee

  • 149 Posts
  • 63 Reply Likes
Hi Benjamin,

The current html setup for Smart Player does not produce a responsive player view in the main html file.  If you want the player to take up the entire size of page you can link (use) the 2nd html file that gets created.  These are named on the MacOS 'media/index_player.html' or on Windows '[production-name]_player.html'.  This file will fill the entire size (width and height) of the device you are viewing it on.

I'd love to hear more about what you'd expect the page to be coming out of Camtasia.  Would you want to player to take up the entire page?  Would you still want margins on the page?  Would you expect the player to only get so wide on large monitors or just take up as much space as it can?

Thanks,
Ben
Photo of Dubie

Dubie

  • 1204 Posts
  • 947 Reply Likes
Hey Ben,

I have posted about this before but it pretty much went un-noticed.

The main html page (production_name.html) produced does not scale correctly
and if you try to add content for like a sales page of signup page etc. its bad.

With the main page loaded either locally or hosted in a browser if you grab a corner of the browser and resize the page down the video placement is off center which throws other objects on the page off.

I have created my own page templates that I use the iframe link from the Camtasia produced main html page because of the off responsiveness of the Camtasia produced page.

Examples:

Using the Developer tools responsive design mode in Firefox and Chrome shows what I mean.

Camtasia produced page

Vertical held iphone 6/7/8



Horizontally held Same off centering margins



My Page used to replace the Camtasia page.

Vertical held iphone 6/7/8



Horizontally held



So the problem is if the main html Camtasia page is scaled down it does not scale correctly with the browser/device.


Dubie
Photo of Ben Rhodes

Ben Rhodes, Employee

  • 149 Posts
  • 63 Reply Likes
Hi Dubie,

Sorry I did not notice your previous post on this topic.  Thanks for the detailed examples. I'd like to do some work on these templates at some point.  I agree we can improve how we embed video here.

Ben