Making the Youtube-TV library responsive?

[Crssp]

Anyone familiar with the Youtube-TV github code library:
https://github.com/jakiestfu/Youtube-TV

Having troubles getting the player to be responsive.
Actually it’s the Playlist thumbnails on the right, that I do not know how are being sized. I need those to become smaller and responsive.

I began coding my model with the Default player demo, if that helps.

[Crssp]

Do I need to look at the Youtube API here:
https://developers.google.com/youtube/v3/docs/thumbnails
The thumbs are maybe JSON objects.
What really needs sized down is perhaps the titles of the videos, the thumbnails themselves are not that big, but the overall area is, and it does not size down responsively.

Looking at the script, I only see UL list items in a couple spots, if CSS has any effects on these I may be all set then.
From the ytv.js file: http://github.com/jakiestfu/Youtube-TV/blob/master/src/ytv.js

 list += '<div class="ytv-list-inner"><ul>';
                            for(i=0; i<videos.length; i++){
                                if(videos[i].media$group.yt$duration){
                                    var video = {
                                        title: videos[i].title.$t,
                                        slug: videos[i].media$group.yt$videoid.$t,
                                        link: videos[i].link[0].href,
                                        published: videos[i].published.$t,
                                        rating: videos[i].yt$rating,
                                        stats: videos[i].yt$statistics,
                                        duration: (videos[i].media$group.yt$duration.seconds),
                                        thumb: videos[i].media$group.media$thumbnail[1].url
                                    };

[Crssp]

It looks like I’m having some success using CSS properties for:
.ytv-list-inner {
width: 200px;
}

Between that and the margin-left for the playists div that is 420px (which needs to be made smaller also.

.playlists .special{
position: absolute;
top: 50px;
left: 50%;
margin-left: 420px;

}

[benjaminmisell]

They should be responsive already but if not try the playing with the css I’ll have a go at it too.

[benjaminmisell]

Here’s the responsive css

/*
 * YouTube TV
 */

/*
 * Base Canvas
 */
.ytv-canvas{
    display: block;
    background: #282828;
    overflow: hidden;
    font-family: arial, sans-serif;
    }
.ytv-canvas ::-webkit-scrollbar{
    border-left: 1px solid #000;
    width: 10px;
    }
.ytv-canvas ::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,0.1);
    }

/*
 * Video
 */
.ytv-video{
    position: absolute;
    top: 0;
    right: 30%;
    bottom: 0;
    left: 0;
    height: 100%;
    }
    .ytv-video iframe{
        width: 100%;
        height: 100%;
        border: none;
        outline: none;
        display: block;
        }

/*
 * List
 */
.ytv-list{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 30%;
    }
    .ytv-list-inner{
        overflow: auto;
        position: absolute;
        top: 52px;
        right: 0;
        bottom: 0;
        left: 0;
        -webkit-overflow-scrolling: touch;
        }
    .ytv-list ul{
        margin: 0;
        padding: 0;
        list-style-type: none;
        }
        .ytv-list .ytv-active a{
            border-left: 2px solid #fff;
            background: rgba(255,255,255,0.05);;
            }
        .ytv-list a{
            display: block;
            text-decoration: none;
            font-size: 11px;
            color: #FEFEFE;
            padding: 10px;
            padding-left: 8px;
            border-top: 1px solid rgba(255,255,255,0.1);
            border-bottom: 1px solid rgba(0,0,0,0.5);
            border-left: 2px solid transparent;
            }
            .ytv-list a b{      
                max-height: 45px;
                overflow: hidden;
                display: block;
                text-overflow: ellipsis;
                }
            .ytv-list li:first-child a{ border-top: none; }
            .ytv-list li:last-child a{ border-bottom: none; }
            .ytv-list a:hover,
            .ytv-list-header .ytv-playlists a:hover{ background: rgba(255,255,255,0.05); }
            .ytv-list a:active,
            .ytv-list-header .ytv-playlists a:active{ background: rgba(0,0,0,0.05); }

        .ytv-list .ytv-content{ padding-left: 53%; }
        .ytv-list .ytv-thumb-stroke{
            position: absolute;
            top: 1px;
            left: 1px;
            bottom: 1px;
            right: 1px;
            z-index: 2;
            outline: 1px solid rgba(255,255,255,0.1);
            }
        .ytv-list .ytv-thumb{
            float: left;
            position: relative;
            width: 50%;
            outline: 1px solid rgba(0,0,0,0.5);
            }
            .ytv-list .ytv-thumb img{
                width: 100%;
                display: block;
                }
            .ytv-list .ytv-thumb span{
                position: absolute;
                bottom: 5px;
                right: 5px;
                color: #eee;
                background: rgba(0,0,0,0.7);
                font-size: 11px;
                font-weight: bold;
                padding: 0px 4px;

                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                border-radius: 3px;
                }
        .ytv-views{
            display: block;
            margin-top: 5px;
            font-size: 10px;
            font-weight: normal;
            opacity: 0.3;
            }


    .ytv-list-header{
        height: 52px;
        -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        }
        .ytv-list-header a{
            background: rgba(255,255,255,0.05);
            position: relative;
            z-index: 10;
            }
        .ytv-list-header img,
        .ytv-list .ytv-playlists .ytv-thumb img{
            width: 30px;
            vertical-align: middle;
            }
        .ytv-list-header span{      
            padding-left: 10px;
            font-size: 12px;
            font-weight: bold;
            }

/*
 * Playlists
 */
.ytv-playlists{
    z-index: 9;
    position: absolute;
    background: #282828;
    top:52px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    display: none;
    }
    .ytv-playlists img,
    .ytv-list-header img{
        float: left;
        }
    .ytv-playlists a span,
    .ytv-list-header a span{    
        white-space: nowrap;
        padding-left: 10px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        }
    .ytv-list-header > a span{
        line-height: 30px;
        }
    .ytv-list-header .ytv-playlists a{
        background: none;
        }
    .ytv-playlist-open .ytv-playlists{
        display: block;
        }

/*
 * Modifiers
 */
.ytv-relative{
    position: relative;
    width: 100%;
    height: 100%;
    }
.ytv-full{
    position: fixed;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    }
.ytv-arrow {
    height: 10px;
    width: 0;
    position: relative;
    top: 10px;
    right: 5px;
    border: 10px solid transparent;
    float: right;
    border-top-color: rgba(0,0,0,0.4);
    display: none;
    }
    .ytv-has-playlists .ytv-arrow{
        display: inline-block;
        }
    .ytv-playlist-open .ytv-arrow{
        border-color: transparent;
        border-bottom-color: rgba(0,0,0,0.4);
        top: -10px;
        }

.ytv-list-header a:after,
.ytv-clear:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
    }

[Crssp]

Thanks and awesome, I’ll try attaching your sheet and see what happens.
Will post a link to my project if I have more questions.
Thanks ben

PS: what is Feature Bury here on the forums at the bottom of the posts?

[Crssp]

Having to tweak that code sheet, that CSS sheet with the github project’s demo.css makes everything dissappear.
Looking to merge the good RWD responsive bits and come up with a hybrid .css styles.
My problems so far the whole thing doesn’t seem to want to size down below 800 px wide.
Work in progress then.

[Author]

Posts