Responsive/Elastic video

Tata

2013-10-19 23:35

I just tested the insertion of YouTube video to the e-shop. With the hints added under http://opensolution.org/download,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

/* YOUTUBE */
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:

4. Replace with:

» Quick.Cart v6.x

cmsimple.sk