{"id":3012,"date":"2013-05-03T04:00:00","date_gmt":"2013-05-03T04:00:00","guid":{"rendered":"http:\/\/jwplayer.com\/new-in-jw-player-responsive-design\/"},"modified":"2023-02-07T14:40:50","modified_gmt":"2023-02-07T19:40:50","slug":"new-in-jw-player-responsive-design","status":"publish","type":"post","link":"https:\/\/jwplayer.com\/blog\/new-in-jw-player-responsive-design\/","title":{"rendered":"New in JW Player: Responsive Design"},"content":{"rendered":"<div>\n<p>With sales of mobile devices now\u00a0<a href=\"http:\/\/www.sltrib.com\/sltrib\/money\/55703045-79\/percent-idc-million-smartphone.html.csp\">outpacing those of desktop PCs<\/a>, web designers face a challenge: how to best present content across all these devices. Smartphone screens average around 4\u201d diagonally, tablets are 7\u2033 to 10\u2033, laptops average around 14\u2033 and desktop monitors go up to 30\u2033 these days. All these different devices result in screens of varying shapes and sizes. This presents a challenge when laying out a page \u2013 how to provide a viewing experience that looks good on every screen. One solution is responsive design.<\/p>\n<h2>What is Responsive Design?<\/h2>\n<p>The best way to understand responsive design is to look at what happens when a page is not responsive:<\/p>\n<p>As you can see, when design is not responsive, when you resize your screen, in this case the browser window, the page elements do not resize as well. The traditional way around this is to create multiple sites, one for the desktop, one for a smartphone, etc. This is not ideal, both from the point of view of the designer\/developer and the end user experience.<\/p>\n<p><a href=\"http:\/\/en.wikipedia.org\/wiki\/Responsive_web_design\">Responsive Web Design<\/a>\u00a0is an approach to creating a website that dynamically adapts itself to the size of the screen on which it is being displayed. Whether you are on a tablet, smartphone or desktop, responsive pages rearrange and resize content to provide the optimal viewing experience. If you are interested in looking at a few responsive design examples, we highly recommend\u00a0<a href=\"http:\/\/mediaqueri.es\/\">checking out this blog<\/a>.<\/p>\n<h2>The Challenge with Responsive Video<\/h2>\n<p>While text can easily be manipulated in a responsive design, embedded video has remained a challenge. Unlike the HTML5 <video> tag, which can be scaled responsively by setting max-width:100% and height:auto, embedded players like YouTube, Vimeo and JW Player don\u2019t scale automatically. This is mainly because their embeds contain a fixed width and height in pixels. Responsive designs lay out page elements through relative units, such as percentages, rather than pixels. To properly make a player responsive, it is important that the aspect ratio of the video be maintained by also scaling the height according to this ratio.<\/p>\n<p>To be honest, it is possible to make embedded players such as earlier versions of JW6 responsive by using various CSS hacks. For instance,\u00a0<a href=\"http:\/\/webdesignerwall.com\/tutorials\/css-elastic-videos\">Elastic Videos<\/a>\u00a0uses iframes where the source is 100\u00d7100 pixels.\u00a0<a href=\"http:\/\/fitvidsjs.com\/\">FitVids<\/a>\u00a0is a jquery plugin that uses additional javascript libraries to achieve responsive design. As you can imagine, these are not the most elegant solutions, nor are they scalable.<\/p>\n<p>Because responsive design is a current web trend used by a lot of sites, we have received many feature requests for JW Player to support it. We wanted to provide a setable option within the player to make it responsive, rather than merely a set of instructions to use JW Player with one of the existing hacks. This was a challenge because JW Player is used on so many sites across both Flash and HTML5 modes, that we had to avoid potential CSS clashes (conflicts between the CSS in the player and the existing CSS on the page).<\/p>\n<h2>Introducing JW Player Responsive Design<\/h2>\n<p>With the release of JW Player 6.4, we introduced native support for responsive design. To get started, all you have to do is set the player width to a percentage, and indicate the video\u2019s aspect ratio. The player will automatically resize its height accordingly.<\/p>\n<h3>JW Player Setup Code<\/h3>\n<p>The responsive player setup options for this demo are displayed below. To learn more about embedding JW Player, check out\u00a0<a href=\"https:\/\/www.jwplayer.com\/support\/jw-player\/28839\/embedding-the-player\">our support documentation<\/a>.<\/p>\n<pre>jwplayer(\"myResponsiveVideo\").setup({<br>          file: \"\/assets\/tearsofsteel.mp4\",<br>          image: \"\/assets\/tearsofsteel.jpg\",<br>          width: \"100%\",<br>          aspectratio: \"12:5\"<br>});<br><\/pre>\n<h3>WordPress Setup Options<\/h3>\n<p>Our\u00a0<a href=\"http:\/\/wordpress.org\/extend\/plugins\/jw-player-plugin-for-wordpress\/\">WordPress Plugin version 2.1<\/a>\u00a0makes it even easier to setup JW Player with Responsive design. In the JW Player management section, simply set the player dimensions to responsive:<\/p>\n<\/p>\n<p>Check out\u00a0<a href=\"http:\/\/demo.jwplayer.com\/responsive-example\/\" target=\"_blank\" rel=\"noopener\">this demo<\/a>\u00a0to test out a responsive vs a non-responsive JW Player. If you have questions on this functionality, or ideas for future updates, please let us know!<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>With sales of mobile devices now\u00a0outpacing those of desktop PCs, web designers face a challenge: how to best present content across all these devices. Smartphone screens average around 4\u201d diagonally, tablets are 7\u2033 to 10\u2033, laptops average around 14\u2033 and desktop monitors go up to 30\u2033 these days. All these different devices result in screens [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3012","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>New in JW Player: Responsive Design - JW Player<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jwplayer.com\/blog\/new-in-jw-player-responsive-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"New in JW Player: Responsive Design - JW Player\" \/>\n<meta property=\"og:description\" content=\"With sales of mobile devices now\u00a0outpacing those of desktop PCs, web designers face a challenge: how to best present content across all these devices. Smartphone screens average around 4\u201d diagonally, tablets are 7\u2033 to 10\u2033, laptops average around 14\u2033 and desktop monitors go up to 30\u2033 these days. All these different devices result in screens [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jwplayer.com\/blog\/new-in-jw-player-responsive-design\/\" \/>\n<meta property=\"og:site_name\" content=\"JW Player\" \/>\n<meta property=\"article:published_time\" content=\"2013-05-03T04:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-07T19:40:50+00:00\" \/>\n<meta name=\"author\" content=\"JW Player\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"JW Player\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jwplayer.com\/blog\/new-in-jw-player-responsive-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jwplayer.com\/blog\/new-in-jw-player-responsive-design\/\"},\"author\":{\"name\":\"JW Player\",\"@id\":\"https:\/\/jwplayer.com\/#\/schema\/person\/4ce3d83ed5ba775537e8e6c8307f3c6f\"},\"headline\":\"New in JW Player: Responsive Design\",\"datePublished\":\"2013-05-03T04:00:00+00:00\",\"dateModified\":\"2023-02-07T19:40:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jwplayer.com\/blog\/new-in-jw-player-responsive-design\/\"},\"wordCount\":644,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/jwplayer.com\/#organization\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/jwplayer.com\/blog\/new-in-jw-player-responsive-design\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jwplayer.com\/blog\/new-in-jw-player-responsive-design\/\",\"url\":\"https:\/\/jwplayer.com\/blog\/new-in-jw-player-responsive-design\/\",\"name\":\"New in JW Player: Responsive Design - JW Player\",\"isPartOf\":{\"@id\":\"https:\/\/jwplayer.com\/#website\"},\"datePublished\":\"2013-05-03T04:00:00+00:00\",\"dateModified\":\"2023-02-07T19:40:50+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jwplayer.com\/blog\/new-in-jw-player-responsive-design\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jwplayer.com\/blog\/new-in-jw-player-responsive-design\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jwplayer.com\/blog\/new-in-jw-player-responsive-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jwplayer.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"New in JW Player: Responsive Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jwplayer.com\/#website\",\"url\":\"https:\/\/jwplayer.com\/\",\"name\":\"JW Player\",\"description\":\"End-to-End Solution for Streaming &amp; Monetizing Video\",\"publisher\":{\"@id\":\"https:\/\/jwplayer.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jwplayer.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jwplayer.com\/#organization\",\"name\":\"JW Player\",\"url\":\"https:\/\/jwplayer.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jwplayer.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jwplayer.com\/wp-content\/uploads\/2023\/02\/logo-jwp-primary.png\",\"contentUrl\":\"https:\/\/jwplayer.com\/wp-content\/uploads\/2023\/02\/logo-jwp-primary.png\",\"width\":1000,\"height\":417,\"caption\":\"JW Player\"},\"image\":{\"@id\":\"https:\/\/jwplayer.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jwplayer.com\/#\/schema\/person\/4ce3d83ed5ba775537e8e6c8307f3c6f\",\"name\":\"JW Player\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jwplayer.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2db7398616357b21568fd90b8357560b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2db7398616357b21568fd90b8357560b?s=96&d=mm&r=g\",\"caption\":\"JW Player\"},\"url\":\"https:\/\/jwplayer.com\/blog\/author\/jw-player\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"New in JW Player: Responsive Design - JW Player","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jwplayer.com\/blog\/new-in-jw-player-responsive-design\/","og_locale":"en_US","og_type":"article","og_title":"New in JW Player: Responsive Design - JW Player","og_description":"With sales of mobile devices now\u00a0outpacing those of desktop PCs, web designers face a challenge: how to best present content across all these devices. Smartphone screens average around 4\u201d diagonally, tablets are 7\u2033 to 10\u2033, laptops average around 14\u2033 and desktop monitors go up to 30\u2033 these days. All these different devices result in screens [&hellip;]","og_url":"https:\/\/jwplayer.com\/blog\/new-in-jw-player-responsive-design\/","og_site_name":"JW Player","article_published_time":"2013-05-03T04:00:00+00:00","article_modified_time":"2023-02-07T19:40:50+00:00","author":"JW Player","twitter_card":"summary_large_image","twitter_misc":{"Written by":"JW Player","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jwplayer.com\/blog\/new-in-jw-player-responsive-design\/#article","isPartOf":{"@id":"https:\/\/jwplayer.com\/blog\/new-in-jw-player-responsive-design\/"},"author":{"name":"JW Player","@id":"https:\/\/jwplayer.com\/#\/schema\/person\/4ce3d83ed5ba775537e8e6c8307f3c6f"},"headline":"New in JW Player: Responsive Design","datePublished":"2013-05-03T04:00:00+00:00","dateModified":"2023-02-07T19:40:50+00:00","mainEntityOfPage":{"@id":"https:\/\/jwplayer.com\/blog\/new-in-jw-player-responsive-design\/"},"wordCount":644,"commentCount":0,"publisher":{"@id":"https:\/\/jwplayer.com\/#organization"},"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/jwplayer.com\/blog\/new-in-jw-player-responsive-design\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/jwplayer.com\/blog\/new-in-jw-player-responsive-design\/","url":"https:\/\/jwplayer.com\/blog\/new-in-jw-player-responsive-design\/","name":"New in JW Player: Responsive Design - JW Player","isPartOf":{"@id":"https:\/\/jwplayer.com\/#website"},"datePublished":"2013-05-03T04:00:00+00:00","dateModified":"2023-02-07T19:40:50+00:00","breadcrumb":{"@id":"https:\/\/jwplayer.com\/blog\/new-in-jw-player-responsive-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jwplayer.com\/blog\/new-in-jw-player-responsive-design\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jwplayer.com\/blog\/new-in-jw-player-responsive-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jwplayer.com\/"},{"@type":"ListItem","position":2,"name":"New in JW Player: Responsive Design"}]},{"@type":"WebSite","@id":"https:\/\/jwplayer.com\/#website","url":"https:\/\/jwplayer.com\/","name":"JW Player","description":"End-to-End Solution for Streaming &amp; Monetizing Video","publisher":{"@id":"https:\/\/jwplayer.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jwplayer.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jwplayer.com\/#organization","name":"JW Player","url":"https:\/\/jwplayer.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jwplayer.com\/#\/schema\/logo\/image\/","url":"https:\/\/jwplayer.com\/wp-content\/uploads\/2023\/02\/logo-jwp-primary.png","contentUrl":"https:\/\/jwplayer.com\/wp-content\/uploads\/2023\/02\/logo-jwp-primary.png","width":1000,"height":417,"caption":"JW Player"},"image":{"@id":"https:\/\/jwplayer.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jwplayer.com\/#\/schema\/person\/4ce3d83ed5ba775537e8e6c8307f3c6f","name":"JW Player","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jwplayer.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2db7398616357b21568fd90b8357560b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2db7398616357b21568fd90b8357560b?s=96&d=mm&r=g","caption":"JW Player"},"url":"https:\/\/jwplayer.com\/blog\/author\/jw-player\/"}]}},"_links":{"self":[{"href":"https:\/\/jwplayer.com\/wp-json\/wp\/v2\/posts\/3012"}],"collection":[{"href":"https:\/\/jwplayer.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jwplayer.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jwplayer.com\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/jwplayer.com\/wp-json\/wp\/v2\/comments?post=3012"}],"version-history":[{"count":1,"href":"https:\/\/jwplayer.com\/wp-json\/wp\/v2\/posts\/3012\/revisions"}],"predecessor-version":[{"id":5972,"href":"https:\/\/jwplayer.com\/wp-json\/wp\/v2\/posts\/3012\/revisions\/5972"}],"wp:attachment":[{"href":"https:\/\/jwplayer.com\/wp-json\/wp\/v2\/media?parent=3012"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jwplayer.com\/wp-json\/wp\/v2\/categories?post=3012"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jwplayer.com\/wp-json\/wp\/v2\/tags?post=3012"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}