I've added several thousand videos to the CS-Cart 4.2.2 store, and found that the normal method of embedding videos didn't allow for the video size to scale down when displayed on mobile screens.
After a little research I changed the way they video size is coded and am fairly happy with the results.
Because I am playing MP4 video, I can use HTML5 formatting for the embedding and it is so much easier: Instead of defining the width and height with fixed values, I can simply use width=“100%”, like this:
```php
```
The variables in the code are specific to my implementation (big thank you to Vali @ Hungry Web).
The downside is that when the page is viewed on a PC screen, the video will actually be 100% wide in the content area. If you are using the full 16 grid for the content, the video is about 1175px wide.
I added a CSS class to the display with
which adds a red border around the video (added to the Theme's Custom CSS via the Visual Editor):
```php #video-frame {
border: 3px solid red;
margin-bottom: 5px;
padding: 2px;
} ```
For anyone attempting this, I found this simple blog post to be most helpful - without too much rhetoric to confuse the issue:
[url="http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php"]http://css-tricks.co...dWidthVideo.php[/url]
The blogger includes formats for YouTube/Vimeo iFrame embeds as well.
```php #video-frame {
border: 3px solid red;
margin-bottom: 5px;
padding: 2px;
} ```
For anyone attempting this, I found this simple blog post to be most helpful - without too much rhetoric to confuse the issue:
[url="http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php"]http://css-tricks.co...dWidthVideo.php[/url]
The blogger includes formats for YouTube/Vimeo iFrame embeds as well.