{"id":110,"date":"2014-06-17T00:34:18","date_gmt":"2014-06-17T00:34:18","guid":{"rendered":"http:\/\/html5box.com\/blog\/?p=110"},"modified":"2014-06-17T00:35:22","modified_gmt":"2014-06-17T00:35:22","slug":"responsive-html5-video-gallery","status":"publish","type":"post","link":"https:\/\/html5box.com\/blog\/responsive-jquery-gallery\/responsive-html5-video-gallery\/","title":{"rendered":"Responsive HTML5 Video Gallery"},"content":{"rendered":"<p><strong>Question<\/strong>:<\/p>\n<p>We install the video gallery, but its not responsive, and the thumbwidth and thumbheight attribute doent work to set the dimensions of the thumbnails.<\/p>\n<p>Theres the code :<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;div class=&quot;html5gallery&quot; data-width=&quot;1000&quot; data-height=&quot;560&quot; thumbwidth=&quot;140&quot; thumbheight=&quot;85&quot; data-showimagetoolbox=&quot;always&quot;  data-skin=&quot;light&quot; style=&quot;display:none;&quot;&gt;\r\n<\/pre>\n<p><strong>Answer<\/strong>:<\/p>\n<p>You need to add <code>data-responsive=\"true\"<\/code> to your div. For more details, you can check <a href=\"http:\/\/html5box.com\/html5gallery\/install.php#skinandsize\" title=\"HTML5 Gallery\" target=\"_blank\">http:\/\/html5box.com\/html5gallery\/install.php#skinandsize<\/a><\/p>\n<p>For the thumbnails, it's because you did not add \"data-\" prefix to the parameters. You can change your code to the following:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;div class=&quot;html5gallery&quot; data-responsive=&quot;true&quot; data-width=&quot;1000&quot; data-height=&quot;560&quot; data-thumbwidth=&quot;140&quot; data-thumbheight=&quot;85&quot; data-showimagetoolbox=&quot;always&quot;  data-skin=&quot;light&quot; style=&quot;display:none;&quot;&gt;\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Question: We install the video gallery, but its not responsive, and the thumbwidth and thumbheight attribute doent work to set the dimensions of the thumbnails. Theres the code : &lt;div class=&quot;html5gallery&quot; data-width=&quot;1000&quot; data-height=&quot;560&quot; thumbwidth=&quot;140&quot; thumbheight=&quot;85&quot; data-showimagetoolbox=&quot;always&quot; data-skin=&quot;light&quot; style=&quot;display:none;&quot;&gt; Answer: You need to add data-responsive=\"true\" to your div. For more details, you can check http:\/\/html5box.com\/html5gallery\/install.php#skinandsize For &hellip; <a href=\"https:\/\/html5box.com\/blog\/responsive-jquery-gallery\/responsive-html5-video-gallery\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Responsive HTML5 Video Gallery<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-110","post","type-post","status-publish","format-standard","hentry","category-responsive-jquery-gallery"],"_links":{"self":[{"href":"https:\/\/html5box.com\/blog\/wp-json\/wp\/v2\/posts\/110","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/html5box.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/html5box.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/html5box.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/html5box.com\/blog\/wp-json\/wp\/v2\/comments?post=110"}],"version-history":[{"count":5,"href":"https:\/\/html5box.com\/blog\/wp-json\/wp\/v2\/posts\/110\/revisions"}],"predecessor-version":[{"id":115,"href":"https:\/\/html5box.com\/blog\/wp-json\/wp\/v2\/posts\/110\/revisions\/115"}],"wp:attachment":[{"href":"https:\/\/html5box.com\/blog\/wp-json\/wp\/v2\/media?parent=110"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html5box.com\/blog\/wp-json\/wp\/v2\/categories?post=110"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html5box.com\/blog\/wp-json\/wp\/v2\/tags?post=110"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}