{"id":195,"date":"2011-04-26T17:34:36","date_gmt":"2011-04-26T17:34:36","guid":{"rendered":"http:\/\/www.sitekickr.com\/blog\/?p=195"},"modified":"2016-04-07T12:41:46","modified_gmt":"2016-04-07T12:41:46","slug":"play-button-video-thumbnails","status":"publish","type":"post","link":"https:\/\/www.sitekickr.com\/blog\/play-button-video-thumbnails\/","title":{"rendered":"Play button on video thumbnails"},"content":{"rendered":"<p><img loading=\"lazy\" style=\"padding: 5px; margin-right: 5px;\" src=\"http:\/\/www.sitekickr.com\/blog\/wp-content\/uploads\/play.png\" alt=\"\" width=\"128\" height=\"128\" align=\"left\" border=\"2\" \/>Here&#8217;s a quick method to add a play button to video thumbnails. This is useful when you generate dynamic thumbnails for videos, or grab them from a video hosting service, in this case, YouTube.<\/p>\n<h3><\/h3>\n<h3><\/h3>\n<h3><\/h3>\n<h3>The HTML<\/h3>\n<pre class=\"prettyprint\"><code>&lt;<span class=\"start-tag\">a<\/span><span class=\"attribute-name\"> class<\/span>=<span class=\"attribute-value\">\"video-thumb-wrapper\"\r\n   <\/span><span class=\"attribute-name\">href<\/span>=\"<a href=\"\/\/www.youtube.com\/embed\/myk22AuwizE\">\/\/www.youtube.com\/embed\/myk22AuwizE<\/a>\"&gt;\r\n   &lt;<span class=\"start-tag\">img<\/span><span class=\"attribute-name\"> class<\/span>=<span class=\"attribute-value\">\"video-thumb\" <\/span><span class=\"attribute-name\">width<\/span>=<span class=\"attribute-value\">\"280\" <\/span><span class=\"attribute-name\">height<\/span>=<span class=\"attribute-value\">\"200\"\r\n        <\/span><span class=\"attribute-name\">src<\/span>=\"<a href=\"\/\/img.youtube.com\/vi\/myk22AuwizE\/0.jpg\">\/\/img.youtube.com\/vi\/myk22AuwizE\/0.jpg<\/a>\" <span class=\"error\"><span class=\"attribute-name\">\/<\/span><\/span>&gt;\r\n&lt;\/<span class=\"end-tag\">a<\/span>&gt;\r\n<\/code><\/pre>\n<h3>The CSS<\/h3>\n<pre><code>.video-thumb-wrapper { display: block; width: 280px; height: 200px; \r\n                       background: url('\/img\/play.png') center center no-repeat; }\r\n.video-thumb { filter: alpha(opacity = 40); opacity: .4; }\r\n<\/code><\/pre>\n<p><code>\/* set width and height of the wrapper to the width and height of the thumbnail itself *\/<br \/>\n<\/code><\/p>\n<p>&nbsp;<\/p>\n<p>Add a lightbox to the <em>video-thumb-wrapper<\/em> class to make it even more functional.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here&#8217;s a quick method to add a play button to video thumbnails. This is useful when you generate dynamic thumbnails for videos, or grab them&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"amp_status":""},"categories":[12],"tags":[87],"_links":{"self":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/195"}],"collection":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/comments?post=195"}],"version-history":[{"count":7,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/195\/revisions"}],"predecessor-version":[{"id":2472,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/195\/revisions\/2472"}],"wp:attachment":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/media?parent=195"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/categories?post=195"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/tags?post=195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}