{"id":210,"date":"2017-12-03T02:42:42","date_gmt":"2017-12-03T02:42:42","guid":{"rendered":"https:\/\/html5box.com\/blog\/?p=210"},"modified":"2017-12-03T03:05:43","modified_gmt":"2017-12-03T03:05:43","slug":"play-twitch-video-with-html5-gallery","status":"publish","type":"post","link":"https:\/\/html5box.com\/blog\/jquery-video-gallery\/play-twitch-video-with-html5-gallery\/","title":{"rendered":"Play Twitch video with HTML5 Gallery"},"content":{"rendered":"

Product<\/strong>:<\/p>\n

HTML5 Gallery<\/a><\/p>\n

Question<\/strong>:<\/p>\n

I am trying to use the HTML5Gallery and I see you have Vimeo and YouTube. I wonder how can I play Twitch video in HTML5 Gallery?<\/p>\n

Answer<\/strong>:<\/p>\n

1. In the Twitch video player page, click the Share button, copy the code from the \"Embed Video\" text box.<\/p>\n

2. From the \"Embed Share\" text, copy the src attribute value of the iframe. It will have a format like https:\/\/player.twitch.tv\/?autoplay=false&video=vXXXXXXXX<\/p>\n

3. When adding the Twitch video the gallery, add a data attribute data-mediatype=12<\/code> to the <a> tag.<\/p>\n

A demo code snippet is as follows:<\/p>\n

\r\n<div style="display:none;" class="html5gallery" data-skin="gallery" data-width="480" data-height="272">\r\n    \r\n  <!-- Add Twitch video to Gallery -->\r\n  <a href="https:\/\/player.twitch.tv\/?autoplay=false&video=v206184868" data-mediatype=12><img src="https:\/\/html5box.com\/html5gallery\/images\/Desert_256.jpg" alt="Twitch Video"><\/a>\r\n\r\n  <!-- Add Youtube video to Gallery -->\r\n  <a href="http:\/\/www.youtube.com\/embed\/YE7VzlLtp-4"><img src="http:\/\/img.youtube.com\/vi\/YE7VzlLtp-4\/2.jpg" alt="Youtube Video"><\/a>\r\n\r\n<\/div>\r\n<\/pre>\n
\n
  
\n  \"Twitch<\/a><\/p>\n
  
\n  \"Youtube<\/a><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Product: HTML5 Gallery Question: I am trying to use the HTML5Gallery and I see you have Vimeo and YouTube. I wonder how can I play Twitch video in HTML5 Gallery? Answer: 1. In the Twitch video player page, click the Share button, copy the code from the \"Embed Video\" text box. 2. From the \"Embed … Continue reading Play Twitch video with HTML5 Gallery<\/span> →<\/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":[8,6],"tags":[],"class_list":["post-210","post","type-post","status-publish","format-standard","hentry","category-jquery-gallery","category-jquery-video-gallery"],"_links":{"self":[{"href":"https:\/\/html5box.com\/blog\/wp-json\/wp\/v2\/posts\/210","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=210"}],"version-history":[{"count":20,"href":"https:\/\/html5box.com\/blog\/wp-json\/wp\/v2\/posts\/210\/revisions"}],"predecessor-version":[{"id":230,"href":"https:\/\/html5box.com\/blog\/wp-json\/wp\/v2\/posts\/210\/revisions\/230"}],"wp:attachment":[{"href":"https:\/\/html5box.com\/blog\/wp-json\/wp\/v2\/media?parent=210"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html5box.com\/blog\/wp-json\/wp\/v2\/categories?post=210"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html5box.com\/blog\/wp-json\/wp\/v2\/tags?post=210"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}