CODEWITHSUNDEEP
javascriptyoutuberesponsive-designembedjwplayer
aintnobody
aintnobody

Reputation: 129

mobile-first method to deal with size of embedded video players?

I see a number of ways to deal with layouts, and interchange, etc to deal with image sizes, but I haven't come across any info about video player size. For instance, using viewbix, voo, jw, or any other js served video player, the size of the player is built into the embed. It also has an associated image file for the poster frame.

Just wondering how other folks approach this. Do you make multiple versions of the embed and image for various breakpoint sizes? Does it matter if the embed is too big? Not sure if that actually affects streaming speed or not, or if the video itself is technically doing anything until play is pressed. Image would still be an issue though as serving a full width desktop size image on a 320px screen seems a waste.

What's the smart way to handle this globally?

thx

Upvotes: 3

Views: 81

Answers (1)

emaxsaun
emaxsaun

Reputation: 4201

With the JW Player, we have responsive support built into the player - http://www.jwplayer.com/blog/new-in-jw-player-responsive-design/, so you don't need to worry about breakpoints, media queries, or anything like that. Those would all still be handled in your CSS.

jwplayer("myResponsiveVideo").setup({
          file: "/assets/tearsofsteel.mp4",
          image: "/assets/tearsofsteel.jpg",
          width: "100%",
          aspectratio: "12:5"
});

Basically a set up like this will make the player responsive, regardless of what container it is in.

Upvotes: 1

Related Questions