{"id":36351,"date":"2024-11-25T07:00:00","date_gmt":"2024-11-25T15:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=36351"},"modified":"2024-11-25T12:04:44","modified_gmt":"2024-11-25T20:04:44","slug":"optimizing-slow-loading-videos-nuxt","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/optimizing-slow-loading-videos-nuxt","title":{"rendered":"Optimizing Slow-Loading Videos in Nuxt With Cloudinary"},"content":{"rendered":"\n<p>When including video on your website, one of your top priorities should be optimizing it to provide a smooth user experience. Slow-loading videos are the fastest ways to lose a visitor, leading to higher bounce rates and fewer conversions. They should load quickly, be formatted correctly, and load in under <a href=\"https:\/\/crisp.co\/do-videos-impact-your-websites-load-time\/\">three seconds<\/a>.<\/p>\n\n\n\n<p>In this blog post, we\u2019ll show you how to optimize videos in your <a href=\"https:\/\/nuxt.com\/\">Nuxt<\/a> app using Cloudinary, streamline your video workflow, and enhance your website\u2019s performance.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Prerequisites<\/h2>\n\n\n\n<p>You should have:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"http:\/\/node.js\">Node.js<\/a> installed on your computer.<\/li>\n\n\n\n<li>Knowledge of<a href=\"https:\/\/nuxt.com\/\"> Nuxt.js<\/a>.<\/li>\n\n\n\n<li>An understanding of JavaScript.yt<\/li>\n\n\n\n<li>A free <a href=\"https:\/\/cloudinary.com\/users\/register\/free?utm_source=hackmamba&amp;utm_campaign=hackmamba-hackathon&amp;utm_medium=hackmamba-blog\">Cloudinary account<\/a>. If you haven\u2019t already, <a href=\"https:\/\/cloudinary.com\/users\/register_free\">sign up for a Cloudinary account<\/a>. It\u2019s where our videos will live and be managed.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Getting Started<\/h2>\n\n\n\n<p>Let\u2019s kick things off by setting up our Nuxt.js app. Start with this command:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">npx nuxi@latest init <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">my-app<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Replace <code>&lt;my-app&gt;<\/code> with the actual name of your app. After running the command, you\u2019ll see a couple of prompts that will set the app&#8217;s details for you. It&#8217;s up to you to decide what to choose, in my case, I went for<a href=\"https:\/\/pnpm.io\/\"> pnpm<\/a> as my package manager and didn&#8217;t initialize git.<\/p>\n\n\n\n<p>Afterward, let\u2019s go into our app:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">cd <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">my-app<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Then, to integrate our videos in a smooth way, we\u2019ll use the<a href=\"https:\/\/cloudinary.nuxtjs.org\/\"> Nuxt Cloudinary<\/a> module. To install it, let\u2019s run the following command:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">npx nuxi@latest <span class=\"hljs-built_in\">module<\/span> add @nuxtjs\/cloudinary<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>One more step is left. We\u2019ll need to set up an <a href=\"https:\/\/nuxt.com\/docs\/guide\/going-further\/runtime-config#environment-variables\">environment variable<\/a> to help us securely store key information for our app to communicate with Cloudinary:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>CLOUDINARY_CLOUD_NAME<\/code>. This is your Cloudinary cloud name, a unique identifier for your Cloudinary account. This can be found at the top-left corner of your Cloudinary console.<\/li>\n<\/ul>\n\n\n\n<p>And that\u2019s it! Now let\u2019s go to our <code>app.vue<\/code> file and use the<a href=\"https:\/\/cloudinary.nuxtjs.org\/components\/cldvideoplayer\"> CldVideoPlayer<\/a> component from \u201cNuxt Cloudinary\u201d. This component will help us to easily embed our video in our app using the video public ID as the source of the video:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n\n\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">section<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"video-container\"<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">CldVideoPlayer<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"1920\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">\"1080\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ <span class=\"hljs-attr\">Public<\/span> <span class=\"hljs-attr\">ID<\/span> <span class=\"hljs-attr\">of<\/span> <span class=\"hljs-attr\">the<\/span> <span class=\"hljs-attr\">video<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"sea-turtle\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n\u00a0\u00a0<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">section<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span> <span class=\"hljs-attr\">scoped<\/span>&gt;<\/span><span class=\"css\">\n\n<span class=\"hljs-selector-class\">.video-container<\/span> {\n\n\u00a0\u00a0<span class=\"hljs-attribute\">position<\/span>: absolute;\n\n\u00a0\u00a0<span class=\"hljs-attribute\">top<\/span>: <span class=\"hljs-number\">50%<\/span>;\n\n\u00a0\u00a0<span class=\"hljs-attribute\">left<\/span>: <span class=\"hljs-number\">50%<\/span>;\n\n\u00a0\u00a0<span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">translate<\/span>(-<span class=\"hljs-number\">50%<\/span>, -<span class=\"hljs-number\">50%<\/span>);\n\n\u00a0\u00a0<span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">50vw<\/span>;\n\n}\n\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>If we run our app, we\u2019ll see our video loaded and playable:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs shcb-wrap-lines\">npm run dev<\/code><\/span><\/pre>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcI2dQrZ0loczWLNc4NzBAkQl2hFXRwMnXDAMhTMq9644CpQtPwAZYEBmdQFz9q0qLQ2LbD_dFlkSIeL1fyamirtYolcgCvBQBua0jkKbgKZOJelxI7k3JULYpRIR8D4SpETSJ9zQzZ_f_Z2eZXZfQmGwYb?key=zK9LLN1R07ea1vbjO4Bz4Q\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Optimizing Our Video<\/strong><\/h2>\n\n\n\n<p>By default, when using the Cloudinary <code>CldVideoPlayer<\/code> component, our video will be optimized out of the box, considering the end-user&#8217;s device and connection speed. Depending on our case, we can go even further with video<a href=\"https:\/\/cloudinary.com\/documentation\/video_manipulation_and_delivery#overview\"> transformations<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Transformations<\/strong><\/h3>\n\n\n\n<p>You can use URL transformations as extra options in your content URLs to change how your content is delivered. These options let you control things like quality, format, bitrate, and effects for videos. Cloudinary automatically handles all the re-encoding when you modify the URL, so you don\u2019t need to upload multiple versions manually.<\/p>\n\n\n\n<p>Depending on our use case, we might want to deliver only a little quality to our video. Decreasing our video quality to 40 would downgrade its size from 1.6MB to 1.2MB:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n\n\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">section<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"video-container\"<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">CldVideoPlayer<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"1920\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">\"1080\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"sea-turtle\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">:transformation<\/span>=<span class=\"hljs-string\">\"{ quality: 40 }\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n\u00a0\u00a0<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">section<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n\n...<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcZMNH9wP9tmSrbOUioMmVjKyCZlIDIEiIjk6oVtd7FSq10Ov4perhitoicRbTcNBT408hDsF4TupVn3gCrAdCoRp9GF1308sKhMm0Tq3j0EU87qXBBoo-MryhFC8u_JwRjYzqIEIashyc346Tk6zr-s7Z9?key=zK9LLN1R07ea1vbjO4Bz4Q\" alt=\"\"\/><\/figure>\n\n\n\n<p>Instead of using a fixed number, we can let Cloudinary decide for us. For example, if we want to reduce the size of a video \u2014 maybe it\u2019s a background video, and we\u2019re not too concerned about the quality \u2014 we can use the <code>auto:eco<\/code> value instead:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n\n\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">section<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"video-container\"<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">CldVideoPlayer<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"1920\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">\"1080\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"sea-turtle\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ <span class=\"hljs-attr\">New<\/span> <span class=\"hljs-attr\">quality<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">:transformation<\/span>=<span class=\"hljs-string\">\"{ quality: 'auto:eco' }\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n\u00a0\u00a0<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">section<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n\n...<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcaj3T-JqbYfL_IZOrrXhn0umC-9h0huV7yvrXPxgxrVjSHZCiJ8L_NajfAw5QaneXHrYdSqfBiqH5u2btWX8Ngn9mCYqrmmLecEMqaz_G-IsX-KFpNDMBpXQFgIpvxSAqxBHeFqnMNHXcxxM4leyTYlWxu?key=zK9LLN1R07ea1vbjO4Bz4Q\" alt=\"\"\/><\/figure>\n\n\n\n<p>Quality isn\u2019t the only thing we can adjust to optimize our video. Our sea turtle video was uploaded in MP4 format, but we could transcode it to WebM format, which offers the key benefit of a smaller file size.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n\n\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">section<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"video-container\"<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">CldVideoPlayer<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"1920\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">\"1080\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"sea-turtle\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ <span class=\"hljs-attr\">Format<\/span> <span class=\"hljs-attr\">to<\/span> <span class=\"hljs-attr\">WebM<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">:transformation<\/span>=<span class=\"hljs-string\">\"{ quality: 'auto:eco', fetch_format: 'webm',\u00a0 }\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n\u00a0\u00a0<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">section<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n\n...<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXesQBEG75JNQMJp2YuTPCWzZRwfjGtNuvSG7pC3ZSkAL58rmjdQbf9NY-O4YSjZEXfw9rwMAzwZcvA35NNG2vAxUiI4MT8RwM1v_UOQMH5CLkG4rmGmHGl3EStgIcQEmXFOg0uwPgdSzYKwzEderbV-BuA?key=zK9LLN1R07ea1vbjO4Bz4Q\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Before<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXeu6SlyIryhwadusevGMChTnfST78BFyvevalpKwUi1b50XEFi00sviXU8YjfafiWEelKJ_RHg2xVBA94uCh5ZWX1pwgk1vKeBtVZarrgE2qoTm_bkUgOV0lpru_155GyjqHmw3LHFrW3DXADH0dxXdLVgI?key=zK9LLN1R07ea1vbjO4Bz4Q\" alt=\"\"\/><figcaption class=\"wp-element-caption\">After<\/figcaption><\/figure>\n\n\n\n<p>Notice that the image quality isn\u2019t affected much.<\/p>\n\n\n\n<p>Like with the quality, we can set the <code>fetch_format<\/code> value to \u201cauto\u201d to let Cloudinary decide for us. When transcoding our video formats, we also need to consider the codec since different browsers might require different ones. The \u201cauto\u201d option allows Cloudinary to choose the best format and codec by considering the end user\u2019s browser. See <code>fetch_format: auto<a href=\"https:\/\/cloudinary.com\/documentation\/video_optimization#tips_and_considerations_for_using_f_auto\"> caveats<\/a><\/code>.<\/p>\n\n\n\n<p>We can also make a significant impact on our video by doing something that might seem obvious from the start: resizing it. Consider that resizing our video could potentially impact its quality.<\/p>\n\n\n\n<p>We can adjust the size of our video to fit our design best, also using transformations:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n\n\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">section<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"video-container\"<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">CldVideoPlayer<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"1920\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">\"1080\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"sea-turtle\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ <span class=\"hljs-attr\">New<\/span> <span class=\"hljs-attr\">size<\/span>, <span class=\"hljs-attr\">we<\/span> <span class=\"hljs-attr\">also<\/span> <span class=\"hljs-attr\">fill<\/span>\u00a0\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">:transformation<\/span>=<span class=\"hljs-string\">\"{ quality: 'auto:eco', fetch_format: 'auto', width: 1280, height:720, crop: 'fill'\u00a0 }\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/&gt;<\/span>\n\n\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n\u00a0\u00a0<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">section<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n\n...<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Notice that the crop parameter was also added. This option resizes an asset to the exact width and height you specify without distorting it. It scales the asset to fill both dimensions and if the aspect ratio doesn\u2019t match the original, it crops the excess on the dimension that goes beyond the requested size.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXea2T_WkHV4f1aMvukpeZhHQEJ7GlvECm7BptWXg4qmBWqXR2e_mNd-bhmjSvs8IwtJxftspVgeQb4gs7xibMTi36lMGM5FDUYpnfv0NFUCKyhsomXuQNHJ479MQwcAqSWGUmAGAYpplckcjcHyCzlJUtE?key=zK9LLN1R07ea1vbjO4Bz4Q\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Before<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfqSUagbnPKZ41GqvLZFYntvreRz9AdMjBPJ4cWB72R22hs6uaxrzK4e0CLruRuFbzOf8cFtV2UO0XVN1ZDvwhSsyDnAys0A9kpCtoDY_lllcil_ms5SEftWSBCwpNloBGE6547ZvgFCekfWKAAho2kkYSN?key=zK9LLN1R07ea1vbjO4Bz4Q\" alt=\"\"\/><figcaption class=\"wp-element-caption\">After<\/figcaption><\/figure>\n\n\n\n<p>Now, when looking at our network one more time, we can see the impact of our changes:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfX3O0fHt7g6uca5naWtskBUcNv5tfBP8RHFwrTNVmxZLqVxIufHFHDhE_Kn4uXuGv1FQ2j7hlOhlFE8nHPp0G7693kjUyb2qpDKSP_QmlqxydqwX1nbOPzLUg62aIyfyYWgfZmEzeAdfofv771ycNKfBM?key=zK9LLN1R07ea1vbjO4Bz4Q\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Conclusion<\/strong><\/h2>\n\n\n\n<p>In this tutorial, we explored how to embed Cloudinary videos and optimize them using transformations for our Nuxt.js app.<\/p>\n\n\n\n<p>Check out our <a href=\"https:\/\/cloudinary.com\/documentation\/video_optimization#default_optimizations\">documentation<\/a> for a more in-depth guide on how to optimize your videos and improve your site\u2019s page load. Then, <a href=\"https:\/\/cloudinary.com\/users\/register_free\">sign up for a free<\/a> Cloudinary account today.<\/p>\n\n\n\n<p>If you have any feedback or want to discuss this blog post in more detail, please share in the <a href=\"https:\/\/community.cloudinary.com\/\">Cloudinary Community forums<\/a> or the associated <a href=\"https:\/\/discord.gg\/cloudinary\">Discord<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When including video on your website, one of your top priorities should be optimizing it to provide a smooth user experience. Slow-loading videos are the fastest ways to lose a visitor, leading to higher bounce rates and fewer conversions. They should load quickly, be formatted correctly, and load in under three seconds. In this blog [&hellip;]<\/p>\n","protected":false},"author":87,"featured_media":36352,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[400,227,303],"class_list":["post-36351","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-nuxt","tag-performance-optimization","tag-video"],"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>Optimizing Slow-Loading Videos in Nuxt With Cloudinary<\/title>\n<meta name=\"description\" content=\"When including video on your website, one of your top priorities should be optimizing it to provide a smooth user experience. Slow-loading videos are the\" \/>\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\/optimizing-slow-loading-videos-nuxt\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Optimizing Slow-Loading Videos in Nuxt With Cloudinary\" \/>\n<meta property=\"og:description\" content=\"When including video on your website, one of your top priorities should be optimizing it to provide a smooth user experience. Slow-loading videos are the\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/optimizing-slow-loading-videos-nuxt\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-25T15:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-25T20:04:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1730413174\/nuxt_video_optimization-blog\/nuxt_video_optimization-blog-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"melindapham\" \/>\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\/optimizing-slow-loading-videos-nuxt#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/optimizing-slow-loading-videos-nuxt\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Optimizing Slow-Loading Videos in Nuxt With Cloudinary\",\"datePublished\":\"2024-11-25T15:00:00+00:00\",\"dateModified\":\"2024-11-25T20:04:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/optimizing-slow-loading-videos-nuxt\"},\"wordCount\":822,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/optimizing-slow-loading-videos-nuxt#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1730413174\/nuxt_video_optimization-blog\/nuxt_video_optimization-blog.jpg?_i=AA\",\"keywords\":[\"Nuxt\",\"Performance Optimization\",\"Video\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2024\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/optimizing-slow-loading-videos-nuxt\",\"url\":\"https:\/\/cloudinary.com\/blog\/optimizing-slow-loading-videos-nuxt\",\"name\":\"Optimizing Slow-Loading Videos in Nuxt With Cloudinary\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/optimizing-slow-loading-videos-nuxt#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/optimizing-slow-loading-videos-nuxt#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1730413174\/nuxt_video_optimization-blog\/nuxt_video_optimization-blog.jpg?_i=AA\",\"datePublished\":\"2024-11-25T15:00:00+00:00\",\"dateModified\":\"2024-11-25T20:04:44+00:00\",\"description\":\"When including video on your website, one of your top priorities should be optimizing it to provide a smooth user experience. Slow-loading videos are the\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/optimizing-slow-loading-videos-nuxt#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/optimizing-slow-loading-videos-nuxt\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/optimizing-slow-loading-videos-nuxt#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1730413174\/nuxt_video_optimization-blog\/nuxt_video_optimization-blog.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1730413174\/nuxt_video_optimization-blog\/nuxt_video_optimization-blog.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/optimizing-slow-loading-videos-nuxt#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Optimizing Slow-Loading Videos in Nuxt With Cloudinary\"}]},{\"@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\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\",\"name\":\"melindapham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"caption\":\"melindapham\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Optimizing Slow-Loading Videos in Nuxt With Cloudinary","description":"When including video on your website, one of your top priorities should be optimizing it to provide a smooth user experience. Slow-loading videos are the","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\/optimizing-slow-loading-videos-nuxt","og_locale":"en_US","og_type":"article","og_title":"Optimizing Slow-Loading Videos in Nuxt With Cloudinary","og_description":"When including video on your website, one of your top priorities should be optimizing it to provide a smooth user experience. Slow-loading videos are the","og_url":"https:\/\/cloudinary.com\/blog\/optimizing-slow-loading-videos-nuxt","og_site_name":"Cloudinary Blog","article_published_time":"2024-11-25T15:00:00+00:00","article_modified_time":"2024-11-25T20:04:44+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1730413174\/nuxt_video_optimization-blog\/nuxt_video_optimization-blog-jpg?_i=AA","type":"image\/jpeg"}],"author":"melindapham","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/optimizing-slow-loading-videos-nuxt#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/optimizing-slow-loading-videos-nuxt"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Optimizing Slow-Loading Videos in Nuxt With Cloudinary","datePublished":"2024-11-25T15:00:00+00:00","dateModified":"2024-11-25T20:04:44+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/optimizing-slow-loading-videos-nuxt"},"wordCount":822,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/optimizing-slow-loading-videos-nuxt#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1730413174\/nuxt_video_optimization-blog\/nuxt_video_optimization-blog.jpg?_i=AA","keywords":["Nuxt","Performance Optimization","Video"],"inLanguage":"en-US","copyrightYear":"2024","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/optimizing-slow-loading-videos-nuxt","url":"https:\/\/cloudinary.com\/blog\/optimizing-slow-loading-videos-nuxt","name":"Optimizing Slow-Loading Videos in Nuxt With Cloudinary","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/optimizing-slow-loading-videos-nuxt#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/optimizing-slow-loading-videos-nuxt#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1730413174\/nuxt_video_optimization-blog\/nuxt_video_optimization-blog.jpg?_i=AA","datePublished":"2024-11-25T15:00:00+00:00","dateModified":"2024-11-25T20:04:44+00:00","description":"When including video on your website, one of your top priorities should be optimizing it to provide a smooth user experience. Slow-loading videos are the","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/optimizing-slow-loading-videos-nuxt#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/optimizing-slow-loading-videos-nuxt"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/optimizing-slow-loading-videos-nuxt#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1730413174\/nuxt_video_optimization-blog\/nuxt_video_optimization-blog.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1730413174\/nuxt_video_optimization-blog\/nuxt_video_optimization-blog.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/optimizing-slow-loading-videos-nuxt#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Optimizing Slow-Loading Videos in Nuxt With Cloudinary"}]},{"@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":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9","name":"melindapham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","caption":"melindapham"}}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1730413174\/nuxt_video_optimization-blog\/nuxt_video_optimization-blog.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/36351","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\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=36351"}],"version-history":[{"count":3,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/36351\/revisions"}],"predecessor-version":[{"id":36358,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/36351\/revisions\/36358"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/36352"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=36351"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=36351"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=36351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}