How To Make Embeded Video Responsive

  • 1
  • Question
  • Updated 2 months ago
  • Answered
How do I make an embedded video responsive
Photo of Gary Granai

Gary Granai

  • 9 Posts
  • 0 Reply Likes

Posted 2 months ago

  • 1
Photo of Ben Rhodes

Ben Rhodes, Employee

  • 280 Posts
  • 116 Reply Likes
Hi Gary,

How are you hosting your video?  If you are using a local Camtasia production that uses the TechSmith Smart Player, then your best bet right now is to link to the [production-name]_player.html file.

This HTML page displays the video using the full width of the browser window and will resize when that width changes.

We have lots of room to improve the other HTML page for those local productions to improve responsiveness.  I'm hoping to be able to work on improving that in the near future.

If you have any other questions let me know.

Thanks,
Ben




Photo of Dubie

Dubie

  • 1452 Posts
  • 1174 Reply Likes
Ya sorry but that doesn't work either.

I have posted before about that the pages are not responsive but it no one seemed to care.

With the major use of mobile devices this is a definite problem and makes for a bad viewing experience.

Does not matter if you use the video.html file or the video_player.html file.
When resized the original layout is all screwed up.

Just for the books, The video.html page, not the _player.html page is what would be
used if you wanted to build out a page with more content.

Using the _player.html page and having the video full page puts any other content you add to the page out of view.

Here is what you get when either smart-player page is resized for a mobile phone.

This project has closed captions ON the video but when resized the captions get pushed off and below the video and the canvas expands around the video. not with the video.

The rest of my content is off the screen.


This is my own page that I embed the smartplayer into and how it Should resize.




This needs to be fixed because neither of the smartplayer pages are acceptable for viewing
with a mobile device.


Dubie:)
Photo of Gary Granai

Gary Granai

  • 9 Posts
  • 0 Reply Likes
The page you refer to is useless.  As is stands, Camtasia hotspot technology is outdated and can't be used if one is concerned about mobil users. And since mobil users are growing, the concern gets greater each day.  I will go to a simple mp4 embed without the hotspot.
Photo of Dubie

Dubie

  • 1447 Posts
  • 1169 Reply Likes
I agree that the smartplayer pages are useless.

I have to disagree though that the hotspot technology is outdated.
It's the fault of the pages, not the hotspots.

I have made my own iframe pages that I swap out for the Camtasia produced pages and the hotspots work and look fine.

Dubie:)
Photo of Gary Granai

Gary Granai

  • 9 Posts
  • 0 Reply Likes
Would you be so kind as to post a link to one of those pages. I would like to look at the code. Thank you

Photo of Dubie

Dubie

  • 1447 Posts
  • 1169 Reply Likes
Here is a basic iframe "Camtasia Style" index and CSS page  you can try.

Download zip file HERE



Dubie:)
Photo of Gary Granai

Gary Granai

  • 9 Posts
  • 0 Reply Likes
Brilliant!  You made my day.  I will start on this now.  Not being the brightest star in the sky when it comes to coding, it may take a few tries to do it correctly.  I will let you know.
Photo of Gary Granai

Gary Granai

  • 9 Posts
  • 0 Reply Likes
The video resizes beautifully.  I am trying to get this look. https://www.steamtraininfo.com/dccguidemp4/

When I put the video into a table I get this look file:///F:/camtasia/dcc%20guide%20fro...;

It will resize if I put tables above and below it.  But not if it is inside the table.  What am I doing incorrectly?



Photo of Gary Granai

Gary Granai

  • 9 Posts
  • 0 Reply Likes
I have achieved the look I want by eliminating all tables and using css to make containers.  The final look is here. https://steamtraininfo.com/dccguide/  

Photo of Dubie

Dubie

  • 1447 Posts
  • 1169 Reply Likes
Looks good but,

Nothing personal just a observation.

Your coding needs cleaning up.

One thing right from the start. Your body tag needs to be AFTER the Head tag.
and you have a lot of stray open tags.

Click Image to enlarge:


I would also myself try to put most or all of the styling in the CSS instead of inline.


Also I should have removed this line of code in the html file.



I have it there to block the robots (Google) from indexing the page when testing.

It needs to be deleted when/if you go live or your page may not get crawled and listed in search.

If you are serious about coding and willing to invest the time learning more on your own a good place to start is w3schools

https://www.w3schools.com/html/html5_intro.asp

Good start though and your getting there 
(Edited)
Photo of Gary Granai

Gary Granai

  • 9 Posts
  • 0 Reply Likes
Hi,
Had to send computer oui for repair so I am a little slow.
I put all the  code in css.  Works well.
I put the video in wordpress and that works well.
Opencart is another thing.  Have you ever added this code to opencart?  If so how?
Gary
Photo of Dubie

Dubie

  • 1447 Posts
  • 1169 Reply Likes
Never used Opencart so I can't be of help to you on that.

Possibly their Forum or Support can help

Dubie:)