Responsive/Elastic video


Avatar: Tata

2013-10-19 23:35

I just tested the insertion of YouTube video to the e-shop. With the hints added under,en,18.html?sDir=Quick.Cart/plugins > youtubeLinks. It has worked excellently. But because of responsive template, it broke the design on a tablet, netbook and smartphone.

And here is my solution:

1. adjust everything as described in mentioned hints.
2. add to <your_template>/style.css

video {
max-width: 100%;
height: auto;
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
.video-wrapper {
width: 600px;
max-width: 100%;
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

3. in core/common.php find:

<object type="application/x-shockwave-flash" data="\\2" class="youtube"><param  name="allowscriptaccess" value="always" /><param name="allowFullScreen" value="true" /><param name="movie" value="\\2" /></object>

4. Replace with:

<div class="video-wrapper">
div class="video-container"><object type="application/x-shockwave-flash" data="\\2" class="youtube"><param  name="allowscriptaccess" value="always" /><param name="allowFullScreen" value="true" /><param name="movie" value="\\2" /></object></div></div>

» Quick.Cart v6.x

Back to top
about us | contact