jmvtechnology / Clappr-Subtitle

SubRip (srt) subtitle support for the Clappr player
17 stars 11 forks source link

Responsive font-size when toggling fullscreen `enhancement` #12

Open areeb111 opened 7 years ago

areeb111 commented 7 years ago

Hi, I have made a small edit to make the font-size of the subtitle is responsive with the screen size so you can use this code :

        player.on(Clappr.Events.PLAYER_FULLSCREEN, function() { 
            $neww = $("#YOURPLAYERID").find("video").width();        
            if ($neww > 1921) {
                $(".container").find(".player-poster").next().css("font-size","4em");
            }
            else if ( $neww <= 1920 && $neww >= 1280){
                $(".container").find(".player-poster").next().css("font-size","3.5em");
            }
            else if ($neww <= 1279 && $neww >= 800) {
                $(".container").find(".player-poster").next().css("font-size","2.5em");
            }
            else if ($neww <= 799 && $neww >= 560) {
                $(".container").find(".player-poster").next().css("font-size","2em");
            }
            else {
                $(".container").find(".player-poster").next().css("font-size","1.5em");
            }
        })

Don't forget to set your default font-size with one of the above em units.