{"id":28468,"date":"2022-06-10T07:57:01","date_gmt":"2022-06-10T07:57:01","guid":{"rendered":"http:\/\/creating-a-video-thumbnail-previews-in-gatsbyjs"},"modified":"2022-06-10T07:57:01","modified_gmt":"2022-06-10T07:57:01","slug":"creating-a-video-thumbnail-previews-in-gatsbyjs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-video-thumbnail-previews-in-gatsbyjs\/","title":{"rendered":"Creating a Video Thumbnail Previews in GatsbyJS"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Video previews give users a quick snapshot of the video while still browsing the page. A <strong>thumbnail<\/strong> is an image preview of the actual video.<\/p>\n<p>This post covers the processes of uploading video files to Cloudinary, displaying their thumbnails on web pages, and creating the preview on hover functionality.<\/p>\n<h2>Demo and source code<\/h2>\n<p>We completed this project in a <a href=\"https:\/\/codesandbox.io\/embed\/gatsby-video-preview-6phw3w?fontsize=14&amp;hidenavigation=1&amp;theme=dark\">CodeSandbox<\/a>. Fork and run it to quickly get started.<\/p>\n<\/div>\n  \n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/gatsby-video-preview-6phw3w?theme=dark&amp;codemirror=1&amp;highlights=&amp;editorsize=50&amp;fontsize=14&amp;expanddevtools=0&amp;hidedevtools=0&amp;eslint=0&amp;forcerefresh=0&amp;hidenavigation=0&amp;initialpath=%2F&amp;module=&amp;moduleview=0&amp;previewwindow=&amp;view=&amp;runonclick=1\"\n      height=\"500\"\n      style=\"width: 100%;\"\n      title=\"Creating a video thumbnail previews in Gatsby.js\"\n      loading=\"lazy\"\n      allow=\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\"\n      sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n    ><\/iframe>\n  <\/div>\n\n  <div class=\"wp-block-cloudinary-markdown \"><p>The GitHub repository can be found <a href=\"https:\/\/github.com\/achingachris\/video-preview-gatsby-cloudinary\">here<\/a>.<\/p>\n<h2>Prerequisites<\/h2>\n<ul>\n<li>A Cloudinary account \u2014 create a free account <a href=\"https:\/\/cloudinary.com\/users\/register\/free\">h<\/a><a href=\"https:\/\/cloudinary.com\/users\/register\/free\">ere<\/a>\n<\/li>\n<li>Knowledge of React.js and Gatsby.js<\/li>\n<li>Node.js version 12+<\/li>\n<\/ul>\n<h1>Creating a Gatsby.Js application<\/h1>\n<p>We will be using <a href=\"https:\/\/www.gatsbyjs.com\/docs\/reference\/gatsby-cli\/\">Gatsby CLI<\/a> to create our application, and we will install it using the following command:<\/p>\n<p><code>npm install -g gatsby-cli<\/code><\/p>\n<p>After the installation, we will use the command <code>gatsby new<\/code> to start a new Gatsby application.<\/p>\n<p>On a terminal (or CMD for Windows), use:<\/p>\n<p><code>gatsby new<\/code><\/p>\n<p>The Gatsby installation process will prompt us to answer some questions:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/chris101\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1653028595\/hackmamba\/video-previewpgatsby\/Screenshot_from_2022-05-20_09-36-17_o2bxdy.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1086\" height=\"524\"\/><\/p>\n<p>After choosing the configurations, a new Gatsby site is created.<\/p>\n<p>To test the new project, run the development server using:<\/p>\n<p><code>npm run develop<\/code><\/p>\n<p>The server runs on localhost port 8000:  <a href=\"http:\/\/localhost:8000\/\">http:\/\/localhost:8000\/<\/a><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/chris101\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1653029244\/hackmamba\/video-previewpgatsby\/Screenshot_from_2022-05-20_09-47-05_lyigj0.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1159\" height=\"630\"\/><\/p>\n<p>We will be styling our page using Bootstrap. To install it, we run the command:<\/p>\n<p><code>npm install bootstrap<\/code><\/p>\n<p>Inside the <code>src<\/code> folder, we will edit <code>pages\/index.js<\/code> to contain the following:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    import React from 'react'\n    \/\/ Import from an installed package - Bootsrap\n    import 'bootstrap\/dist\/css\/bootstrap.min.css'\n    \n    const IndexPage = () =&gt; {\n      return (\n        &lt;div&gt;index&lt;\/div&gt;\n      )\n    }\n    export default IndexPage\n<\/code><\/pre>\n<h1>Uploading media to Cloudinary<\/h1>\n<p>After signing in to your Cloudinary account, navigate to <a href=\"https:\/\/cloudinary.com\/console\/media_library\">Media Library<\/a> and upload a few videos.<\/p>\n<p>The easiest way to upload media to Cloudinary is by using the Upload button at the top right of the web page.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/chris101\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1653050459\/hackmamba\/PR00gxDk_etjpyr.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"824\" height=\"582\"\/><\/p>\n<p>Once the video is uploaded, click on the link icon on the top right of the video card to copy its URL.<\/p>\n<p>Inside the page\/index.js file, above the return keyword, create an array of the video links uploaded to cloudinary, like so:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>  const video_urls = [\n    {\n      id: 1,\n      title: 'Video One',\n      video_url:\n        'https:\/\/res.cloudinary.com\/chris101\/video\/upload\/v1645684691\/video_1.mp4',\n    },\n    {\n      id: 2,\n      title: 'Video Two',\n      video_url:\n        'https:\/\/res.cloudinary.com\/chris101\/video\/upload\/v1645684672\/video_2.mp4',\n    },\n    {\n      id: 3,\n      title: 'Video Three',\n      video_url:\n        'https:\/\/res.cloudinary.com\/chris101\/video\/upload\/v1645684663\/video_3.mp4',\n    },\n  ]\n<\/code><\/pre>\n<h1>Creating a video player using native element<\/h1>\n<p>We will use native HTML elements to display the videos you uploaded to Cloudinary:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    &lt;div className=&quot;card h-100&quot;&gt;\n      &lt;div className=&quot;card-body&quot;&gt;\n        &lt;h4 className=&quot;card-title&quot;&gt;video title&lt;\/h4&gt;\n        &lt;video width=&quot;320&quot; height=&quot;240&quot; controls&gt;\n          &lt;source\n            src=&quot;https:\/\/res.cloudinary.com\/chris101\/video\/upload\/v1645684663\/video_3.mp4&quot;\n            type=&quot;video\/mp4&quot;\n          \/&gt;\n        &lt;\/video&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n<\/code><\/pre>\n<p>Inside the <code>IndexPage<\/code>, we will loop through the arrays with the video URLs and display them:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    {video_urls.map((video) =&gt; (\n    &lt;div key=&quot;{video.id}&quot; className=&quot;col-lg-4 col-sm-6 mb-4&quot;&gt;\n      &lt;div className=&quot;card h-100&quot;&gt;\n        &lt;div className=&quot;card-body&quot;&gt;\n          &lt;h4 className=&quot;card-title&quot;&gt;{video.title}&lt;\/h4&gt;\n          &lt;video width=&quot;320&quot; height=&quot;240&quot; controls&gt;\n            &lt;source src=&quot;{video.video_url}&quot; type=&quot;video\/mp4&quot; \/&gt;\n          &lt;\/video&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n    ))}\n<\/code><\/pre>\n<p>Upon reloading the page, we will have all the videos shown on the page. The video cards show video thumbnails at timestamp 0:00 by default.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/chris101\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1653074452\/hackmamba\/video-previewpgatsby\/Screenshot_from_2022-05-20_22-20-04_jdcubc.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1365\" height=\"631\"\/><\/p>\n<h1>Creating event handlers<\/h1>\n<p>To trigger a preview of the video when a user hovers over the thumbnails, we will create two event handlers:<\/p>\n<ol>\n<li>To start the preview when the mouse pointer is on the thumbnail<\/li>\n<li>To stop the preview once the mouse pointer moves away from the thumbnail<\/li>\n<\/ol>\n<p>To achieve this, we will utilize <code>onMouseEnter<\/code> and <code>onMouseLeave<\/code> <a href=\"https:\/\/reactjs.org\/docs\/events.html#mouse-events\">mouse events in React.js<\/a>.<\/p>\n<p>Inside the IndexPage component, we will create two functions to handle the mouse events: <code>handleMouseEnter()<\/code> and <code>handleMouseLeave()<\/code>.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>      \/\/ handle mouse enter\n      const handleMouseEnter = (e) =&gt; {}\n      \/\/ handle mouse leave\n      const handleMouseLeave = (e) =&gt; {}\n<\/code><\/pre>\n<p>To trigger the video preview, update the <code>handleMouseEnter()<\/code> function to:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>     const handleMouseEnter = (e) =&gt; {\n        const vid = e.target\n        vid.muted = true\n        vid.play()\n      }\n<\/code><\/pre>\n<p>The <code>handleMouseEnter()<\/code> function starts by grabing the <code>&lt;video&gt;&lt;\/video&gt;<\/code> element \u2014 <code>e.target<\/code>. It then mutes the video(<code>vid.muted = true<\/code>), and begins playing the video(<code>vid.play()<\/code>).<\/p>\n<p>To stop the preview and return it to its previous state once the pointer leaves the video card, update the <code>handleMouseLeave()<\/code> function to:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>const handleMouseLeave = (e) =&gt; {\n        const vid = e.target\n        vid.muted = false\n        vid.currentTime = 0\n        vid.pause()\n      }\n<\/code><\/pre>\n<p>To trigger the two events, we update the <code>&lt;video&gt;<\/code> element with:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>   &lt;video\n      width=&quot;320&quot;\n      height=&quot;240&quot;\n      controls\n      onMouseEnter=&quot;{handleMouseEnter}&quot;\n      onMouseLeave=&quot;{handleMouseLeave}&quot;\n    &gt;\n      &lt;source src=&quot;{video.video_url}&quot; type=&quot;video\/mp4&quot; \/&gt;\n    &lt;\/video&gt;\n<\/code><\/pre>\n<p>The complete code to the <code>IndexPage()<\/code> component is:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>import React from 'react'\n\/\/ Import from an installed package - Bootsrap\nimport 'bootstrap\/dist\/css\/bootstrap.min.css'\n\nconst IndexPage = () =&gt; {\n  \/\/ video urls\n  const video_urls = [\n    {\n      id: 1,\n      title: 'Video One',\n      video_url:\n        'https:\/\/res.cloudinary.com\/chris101\/video\/upload\/v1645684691\/video_1.mp4',\n    },\n    {\n      id: 2,\n      title: 'Video Two',\n      video_url:\n        'https:\/\/res.cloudinary.com\/chris101\/video\/upload\/v1645684672\/video_2.mp4',\n    },\n    {\n      id: 3,\n      title: 'Video Three',\n      video_url:\n        'https:\/\/res.cloudinary.com\/chris101\/video\/upload\/v1645684663\/video_3.mp4',\n    },\n  ]\n\n  \/\/ handle mouse enter\n  const handleMouseEnter = (e) =&gt; {\n    const vid = e.target\n    vid.muted = true\n    vid.play()\n  }\n  \/\/ handle mouse leave\n  const handleMouseLeave = (e) =&gt; {\n    const vid = e.target\n    vid.muted = false\n    vid.currentTime = 0\n    vid.pause()\n  }\n\n  return (\n    &lt;div className='container'&gt;\n      &lt;h1 className='text-center mt-4'&gt;Video Show&lt;\/h1&gt;\n\n      {\/* video player *\/}\n      &lt;div className='container'&gt;\n        &lt;div className='row'&gt;\n          {\/* display videos *\/}\n          {video_urls.map((video) =&gt; (\n            &lt;div key={video.id} className='col-lg-4 col-sm-6 mb-4'&gt;\n              &lt;div className='card h-100'&gt;\n                &lt;div className='card-body'&gt;\n                  &lt;h4 className='card-title'&gt;{video.title}&lt;\/h4&gt;\n                  &lt;video\n                    width='320'\n                    height='240'\n                    controls\n                    onMouseEnter={handleMouseEnter}\n                    onMouseLeave={handleMouseLeave}\n                  &gt;\n                    &lt;source src={video.video_url} type='video\/mp4' \/&gt;\n                  &lt;\/video&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n          ))}\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  )\n}\n\nexport default IndexPage\n<\/code><\/pre>\n<p>Once we run the server and hover over the video thumbnails, the preview plays, and it stops once the mouse pointer leaves the thumbnail. A live preview of the demo can be found <a href=\"https:\/\/6phw3w-33073.sse.codesandbox.io\/\">here<\/a>.<\/p>\n<h1>Conclusion<\/h1>\n<p>This post covered the processes of creating a Gatsby.js application, uploading media files to Cloudinary, and creating event handlers to enable a video preview upon thumbnail hover.<\/p>\n<h1>Resources<\/h1>\n<ul>\n<li>\n<a href=\"https:\/\/reactjs.org\/docs\/events.html#mouse-events\">React Mouse events<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/www.gatsbyjs.com\/docs\/\">Gatsby Documentation<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/documentation\/image_video_and_file_upload\">Uploading files to Cloudinary<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/video\">HTML Video Element<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/getbootstrap.com\/\">Bootstrap CSS<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28469,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[378,134,382,371],"class_list":["post-28468","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-gatsbyjs","tag-guest-post","tag-player-video","tag-under-review"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Creating a Video Thumbnail Previews in GatsbyJS<\/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:\/\/cloudinary.com\/blog\/guest_post\/creating-a-video-thumbnail-previews-in-gatsbyjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating a Video Thumbnail Previews in GatsbyJS\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-video-thumbnail-previews-in-gatsbyjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-10T07:57:01+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-video-thumbnail-previews-in-gatsbyjs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-video-thumbnail-previews-in-gatsbyjs\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Creating a Video Thumbnail Previews in GatsbyJS\",\"datePublished\":\"2022-06-10T07:57:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-video-thumbnail-previews-in-gatsbyjs\/\"},\"wordCount\":7,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-video-thumbnail-previews-in-gatsbyjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924418\/Web_Assets\/blog\/91850d635d08fa73db2dba62e5b7ba1ecfa294d4-1144x528-1_28469e22e5\/91850d635d08fa73db2dba62e5b7ba1ecfa294d4-1144x528-1_28469e22e5.png?_i=AA\",\"keywords\":[\"GatsbyJS\",\"Guest Post\",\"Player Video\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-video-thumbnail-previews-in-gatsbyjs\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-video-thumbnail-previews-in-gatsbyjs\/\",\"name\":\"Creating a Video Thumbnail Previews in GatsbyJS\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-video-thumbnail-previews-in-gatsbyjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-video-thumbnail-previews-in-gatsbyjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924418\/Web_Assets\/blog\/91850d635d08fa73db2dba62e5b7ba1ecfa294d4-1144x528-1_28469e22e5\/91850d635d08fa73db2dba62e5b7ba1ecfa294d4-1144x528-1_28469e22e5.png?_i=AA\",\"datePublished\":\"2022-06-10T07:57:01+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-video-thumbnail-previews-in-gatsbyjs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-video-thumbnail-previews-in-gatsbyjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-video-thumbnail-previews-in-gatsbyjs\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924418\/Web_Assets\/blog\/91850d635d08fa73db2dba62e5b7ba1ecfa294d4-1144x528-1_28469e22e5\/91850d635d08fa73db2dba62e5b7ba1ecfa294d4-1144x528-1_28469e22e5.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924418\/Web_Assets\/blog\/91850d635d08fa73db2dba62e5b7ba1ecfa294d4-1144x528-1_28469e22e5\/91850d635d08fa73db2dba62e5b7ba1ecfa294d4-1144x528-1_28469e22e5.png?_i=AA\",\"width\":1144,\"height\":528},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-video-thumbnail-previews-in-gatsbyjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating a Video Thumbnail Previews in GatsbyJS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Creating a Video Thumbnail Previews in GatsbyJS","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:\/\/cloudinary.com\/blog\/guest_post\/creating-a-video-thumbnail-previews-in-gatsbyjs\/","og_locale":"en_US","og_type":"article","og_title":"Creating a Video Thumbnail Previews in GatsbyJS","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-video-thumbnail-previews-in-gatsbyjs\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-06-10T07:57:01+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-video-thumbnail-previews-in-gatsbyjs\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-video-thumbnail-previews-in-gatsbyjs\/"},"author":{"name":"","@id":""},"headline":"Creating a Video Thumbnail Previews in GatsbyJS","datePublished":"2022-06-10T07:57:01+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-video-thumbnail-previews-in-gatsbyjs\/"},"wordCount":7,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-video-thumbnail-previews-in-gatsbyjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924418\/Web_Assets\/blog\/91850d635d08fa73db2dba62e5b7ba1ecfa294d4-1144x528-1_28469e22e5\/91850d635d08fa73db2dba62e5b7ba1ecfa294d4-1144x528-1_28469e22e5.png?_i=AA","keywords":["GatsbyJS","Guest Post","Player Video","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-video-thumbnail-previews-in-gatsbyjs\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-video-thumbnail-previews-in-gatsbyjs\/","name":"Creating a Video Thumbnail Previews in GatsbyJS","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-video-thumbnail-previews-in-gatsbyjs\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-video-thumbnail-previews-in-gatsbyjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924418\/Web_Assets\/blog\/91850d635d08fa73db2dba62e5b7ba1ecfa294d4-1144x528-1_28469e22e5\/91850d635d08fa73db2dba62e5b7ba1ecfa294d4-1144x528-1_28469e22e5.png?_i=AA","datePublished":"2022-06-10T07:57:01+00:00","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-video-thumbnail-previews-in-gatsbyjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-video-thumbnail-previews-in-gatsbyjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-video-thumbnail-previews-in-gatsbyjs\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924418\/Web_Assets\/blog\/91850d635d08fa73db2dba62e5b7ba1ecfa294d4-1144x528-1_28469e22e5\/91850d635d08fa73db2dba62e5b7ba1ecfa294d4-1144x528-1_28469e22e5.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924418\/Web_Assets\/blog\/91850d635d08fa73db2dba62e5b7ba1ecfa294d4-1144x528-1_28469e22e5\/91850d635d08fa73db2dba62e5b7ba1ecfa294d4-1144x528-1_28469e22e5.png?_i=AA","width":1144,"height":528},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-video-thumbnail-previews-in-gatsbyjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Creating a Video Thumbnail Previews in GatsbyJS"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924418\/Web_Assets\/blog\/91850d635d08fa73db2dba62e5b7ba1ecfa294d4-1144x528-1_28469e22e5\/91850d635d08fa73db2dba62e5b7ba1ecfa294d4-1144x528-1_28469e22e5.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28468","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28468"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28468\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28469"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28468"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28468"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28468"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}