Great Script But -- Can it be Made Responsive?

[kailas108]

Just wondering how to make this responsive?

[kailas108]

For example, with FitVids.js, or better yet - fluidvids.js

[dieseld23]

I'd love to see that.. I've been working to make it responsive but no luck so far..

[adm351]

@dmaslach @kailas108 if your using .less use this:

#[selector element]{
    & .ytv-video{
        position: relative;
        padding-bottom: 39.4%; /* 16:9 of 70%*/
        height: 0;
        width: 70%;
        & iframe{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    }
    & .ytv-list{
        width: 30%;
    }
    @media (max-width: @screenSmall){
        & .ytv-list{
            position: relative;
            display: block;
            width: 0;
            padding-bottom: 40%;
            left: auto;
            right: auto;
            top: auto;
            width: 100%;
        }
        & .ytv-video{
            position: relative;
            padding-bottom: 56.25%; /* 16:9 */
            height: 0;
            position: relative;
            display: block;
            left: auto;
            right: auto;
            top: auto;
            width: 100%;
        }
    }
}

That will make the video 70% of the container and the list 30%. Unless the screen is under the screenSmall var when the list will break under the video.

[mortetm]

Hi, I'm new to less and I'm trying to make this work, but to no avail. Can that be achieved using pure css?

[adm351]

yeah of course, less just nests alot easier (among other things). so the just go

#[selector element] .ytv-video{
        position: relative;
        padding-bottom: 39.4%; /* 16:9 of 70%*/
        height: 0;
        width: 70%;
}
#[selector element] .ytv-video iframe{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
}
#[selector element] .ytv-list{
        width: 30%;
}
@media only screen and (max-width:1280px) { /* playlist under cutoff */
    #[selector element] .ytv-list{
            position: relative;
            display: block;
            width: 0;
            padding-bottom: 40%;
            left: auto;
            right: auto;
            top: auto;
            width: 100%;
    }
    #[selector element] .ytv-video{
            position: relative;
            padding-bottom: 56.25%; /* 16:9 */
            height: 0;
            position: relative;
            display: block;
            left: auto;
            right: auto;
            top: auto;
            width: 100%;
    }
}

[mortetm]

Thanks a lot. This will actually help me understand .less and how to transfer everything to it.