{"id":27912,"date":"2021-10-25T15:28:05","date_gmt":"2021-10-25T15:28:05","guid":{"rendered":"http:\/\/Video-aspect-ratio-editor-using-Nuxt.Js"},"modified":"2023-07-07T15:40:45","modified_gmt":"2023-07-07T22:40:45","slug":"video-aspect-ratio-editor-using-nuxt-js","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/video-aspect-ratio-editor-using-nuxt-js\/","title":{"rendered":"Video aspect ratio editor using Nuxt.Js"},"content":{"rendered":"

Introduction<\/h2>\n

An aspect ratio of an image is the ratio of an image\u2019s width to its height. It is commonly two numbers separated by a colon such as 16:9. As we increasingly have different devices being created some with varying display sizes and viewing angles, aspect ratios help us create optimally viewable videos. This situation has been exacerbated by different software demanding their own aspect ratios such as social media websites.<\/p>\n

In this tutorial, we review how we can dynamically render the same video in varying aspect ratios.<\/p>\n

Codesandbox<\/h2>\n

The final project can be viewed on Codesandbox<\/a>.<\/p>\n<\/div>\n\n\n

\n <\/iframe>\n <\/div>\n\n\n

You can find the full source code on my Github<\/a> repository.<\/p>\n

Prerequisites<\/h2>\n

A basic understanding of HTML, CSS, and JavaScript is required to be able to follow along with this tutorial. Knowledge of Vue.Js and Nuxt.Js is not required to understand but would be beneficial.<\/p>\n

Setup<\/h1>\n

Nuxt.Js<\/h2>\n

Nuxt.Js<\/a> is an intuitive Vue framework that boasts of being easy to learn and easy to use. To quickly get started with Nuxt.Js, ensure you have Yarn package manager<\/a> installed or Node package manager<\/a> greater than version v5.2+ or v6.1. This will ensure that npx<\/a> is installed by default. This enables us to use the create-nuxt-app<\/a> utility.<\/p>\n

To get started, open the terminal in your working directory of preference.<\/p>\n

\nyarn create nuxt-app nuxtjs-video-aspect-ratio-editor\n\n# OR<\/span>\n\nnpx create-nuxt-app nuxtjs-video-aspect-ratio-editor\n\n# OR<\/span>\n\nnpm init nuxt-app nuxtjs-video-aspect-ratio-editor\n\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
This will result in a series of questions. Here are our recommended defaults:<\/p>\n
\n
Project name: nuxtjs-video-aspect-ratio-editor<\/p>\n<\/blockquote>\n
\n
Programming language: JavaScript<\/p>\n<\/blockquote>\n
\n
Package manager: Yarn<\/p>\n<\/blockquote>\n
\n
UI framework: Tailwind CSS<\/p>\n<\/blockquote>\n
\n
Nuxt.js modules: N\/A<\/p>\n<\/blockquote>\n
\n
Linting tools: N\/A<\/p>\n<\/blockquote>\n
\n
Testing frameworks: None<\/p>\n<\/blockquote>\n
\n
Rendering mode: Universal (SSR \/ SSG)<\/p>\n<\/blockquote>\n
\n
Deployment target: Server (Node.js hosting)<\/p>\n<\/blockquote>\n
\n
Development tools: N\/A<\/p>\n<\/blockquote>\n
\n
What is your Github username: <your-github-username><\/code><\/p>\n<\/blockquote>\n
\n
Version control system: Git<\/p>\n<\/blockquote>\n
Once the setup is complete, you may now enter the directory and run the project:<\/p>\n
\ncd nuxtjs-video-aspect-ratio-editor\n\n\nyarn dev\n\n# OR<\/span>\n\nnpm run dev\n\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
@nuxtjs\/cloudinary<\/h2>\n
Cloudinary<\/a> is a media management platform that enables us to make the most of our media assets through its comprehensive service, APIs and SDKs. We are going to install the recommended Nuxt.Js plugin, @nuxtjs\/cloudinary<\/a>.<\/p>\n
Open the terminal in your project folder to add the dependency:<\/p>\n
\nyarn<\/span> add<\/span> @nuxtjs<\/span>\/cloudinary\n\n# or<\/span>\n\nnpm install @nuxtjs\/cloudinary\n\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Once installation is complete, add the module in the modules<\/code> section of the nuxt.config.js<\/code> file:<\/p>\n
\n\/\/ nuxt.config.js<\/span>\n\nexport<\/span>  default<\/span>  {\n\n...\n\nmodules: [\n\n'@nuxtjs\/cloudinary'<\/span>\n\n]\n\n...\n\n}\n\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We will then configure our Cloudinary instance by adding a cloudinary<\/code> section to the nuxt.config.js<\/code> file:<\/p>\n
\n\/\/ nuxt.config.js<\/span>\n\nexport<\/span>  default<\/span>  {\n\n...\n\ncloudinary: {\n\ncloudName<\/span>:  process.env.NUXT_ENV_CLOUDINARY_CLOUD_NAME,\n\nuseComponent<\/span>:  true<\/span>,\n\nsecure<\/span>:  true<\/span>\n\n}\n\n}\n\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
In the above piece of code, we refer to an environmental variable (NUXT_ENV_CLOUDINARY_CLOUD_NAME<\/code>). Environmental variables as values that are not dependent on our code itself but on the environment in the code that is executed. They are also useful for sensitive credentials we do not want to be exposed to in our code repositories. Let us first create the .env<\/code> file which will contain our environmental variables:<\/p>\n
\ntouch<\/span> .env<\/span>\n\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
We will then set our environmental variables in the file<\/p>\n
\nNUXT_ENV_CLOUDINARY_CLOUD_NAME=<secret-cloud-name<\/span>><\/span>\n\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Uploading video file<\/h2>\n
Before uploading the video file, we first need to create a form for the user to select the file for upload:<\/p>\n
\n<!-- pages\/index.vue --><\/span>\n\n<form<\/span> action<\/span>=\"#\"<\/span>  method<\/span>=\"POST\"<\/span>  @submit.prevent<\/span>=\"submit\"<\/span>  ><\/span>\n\n<div<\/span>><\/span>\n\n<label<\/span> for<\/span>=\"email\"<\/span>><\/span>Video<\/label<\/span>><\/span>\n\n<div<\/span>><\/span>\n\n<input<\/span>\n\nid<\/span>=\"file\"<\/span>\n\nname<\/span>=\"file\"<\/span>\n\ntype<\/span>=\"file\"<\/span>\n\nrequired<\/span>\n\n@change<\/span>=\"handleFile\"<\/span>\n\n\/><\/span>\n\n<\/div<\/span>><\/span>\n\n<\/div<\/span>><\/span>\n\n<div<\/span>><\/span>\n\n<p<\/span> v-if<\/span>=\"uploading\"<\/span>  ><\/span>\n\nUploading...\n\n<\/p<\/span>><\/span>\n\n<button<\/span> v-else<\/span>  type<\/span>=\"submit\"<\/span>  ><\/span>\n\nUpload\n\n<\/button<\/span>><\/span>\n\n<\/div<\/span>><\/span>\n\n<\/form<\/span>><\/span>\n\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
On file selection, the handleFile<\/code> method will be called whereas the submit<\/code> method will be called once the form is submitted.<\/p>\n
\n\/\/ pages\/index.vue<\/span>\n\nexport<\/span>  default<\/span>  {\n\ndata()  {\n\nreturn<\/span>  {\n\nuploading<\/span>:  false<\/span>,\n\nuploadVideo<\/span>:  null<\/span>,\n\ncloudinaryVideo<\/span>:  null<\/span>,\n\n...\n\n};\n\n},\n\nmethods<\/span>:  {\n\nasync<\/span>  handleFile(e)  {\n\nthis<\/span>.uploadVideo  =  e.target.files[0<\/span>];\n\n},\n\nasync<\/span>  readData(f)  {\n\nreturn<\/span>  new<\/span>  Promise<\/span>((resolve<\/span>)  =><\/span>  {\n\nconst<\/span>  reader  =  new<\/span>  FileReader();\n\nreader.onloadend  =  ()<\/span>  =><\/span>  resolve(reader.result);\n\nreader.readAsDataURL(f);\n\n});\n\n},\n\nasync<\/span>  submit()  {\n\nthis<\/span>.uploading  =  true<\/span>;\n\nconst<\/span>  videoData  =  await<\/span>  this<\/span>.readData(this<\/span>.uploadVideo);\n\nthis<\/span>.cloudinaryVideo  =  await<\/span>  this<\/span>.$cloudinary.upload(videoData,  {\n\nupload_preset<\/span>:  \"default-preset\"<\/span>,\n\nfolder<\/span>:  \"nuxtjs-video-aspect-ratio-editor\"<\/span>,\n\n});\n\nthis<\/span>.uploading  =  false<\/span>;\n\n...\n\n},\n\n...\n\n},\n\n};\n\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The handleFile<\/code> method simply stores the selected file in our local state. The submit<\/code> method uses the readData<\/code> method to obtain the file data from the selected file. It then uploads this file data to Cloudinary specifying the upload present and the upload folder.<\/p>\n
\n
Name: default-preset<\/p>\n<\/blockquote>\n
\n
Unique filename: true<\/p>\n<\/blockquote>\n
\n
Delivery type: upload<\/p>\n<\/blockquote>\n
\n
Access mode: public<\/p>\n<\/blockquote>\n
Once the file upload is complete is when we now proceed to generate the videos with varying aspect ratios.<\/p>\n
Changing aspect ratios<\/h2>\n
We first need to determine which aspect ratios we want to convert to. Let\u2019s add them into a state variable.<\/p>\n
\n\/\/ pages\/index.vue<\/span>\n\nexport<\/span>  default<\/span>  {\n\ndata(){\n\nreturn<\/span>  {\n\n...\n\naspectRatios: [\n\n{ value<\/span>:  \"7680x4320\"<\/span>, label<\/span>:  \"7680 x 4320 (8K UHDTV)\"<\/span>  },\n\n{ value<\/span>:  \"5120x2880\"<\/span>, label<\/span>:  \"5120 x 2880 (5K, iMac with retina screen)\"<\/span>  },\n\n{ value<\/span>:  \"3840x2160\"<\/span>, label<\/span>:  \"3840 \u00d7 2160 (4K UHDTV)\"<\/span>  },\n\n{ value<\/span>:  \"2048x1536\"<\/span>, label<\/span>:  \"2048 x 1536 (iPad with retina screen)\"<\/span>  },\n\n{ value<\/span>:  \"1920x1200\"<\/span>, label<\/span>:  \"1920 x 1200 (WUXGA)\"<\/span>  },\n\n{ value<\/span>:  \"1920x1080\"<\/span>, label<\/span>:  \"1920 x 1080 (HD TV, iPhone 6 plus)\"<\/span>  },\n\n{ value<\/span>:  \"1334x750\"<\/span>, label<\/span>:  \"1334 x 750 (iPhone 6)\"<\/span>  },\n\n{ value<\/span>:  \"1200x630\"<\/span>, label<\/span>:  \"1200 x 630 (Facebook)\"<\/span>  },\n\n{ value<\/span>:  \"1136x640\"<\/span>, label<\/span>:  \"1136 x 640 (iPhone 5 screen)\"<\/span>  },\n\n{ value<\/span>:  \"1024x768\"<\/span>, label<\/span>:  \"1024 x 768 (iPad)\"<\/span>  },\n\n{ value<\/span>:  \"1024x512\"<\/span>, label<\/span>:  \"1024 x 512 (Twitter)\"<\/span>  },\n\n{ value<\/span>:  \"960x640\"<\/span>, label<\/span>:  \"960 x 640 (iPhone 4 screen)\"<\/span>  },\n\n{ value<\/span>:  \"800x600\"<\/span>, label<\/span>:  \"800 x 600\"<\/span>  },\n\n{ value<\/span>:  \"728x90\"<\/span>, label<\/span>:  \"728 x 90 (Common web banner ad size)\"<\/span>  },\n\n{ value<\/span>:  \"720x576\"<\/span>, label<\/span>:  \"720 x 576 (PAL)\"<\/span>  },\n\n{ value<\/span>:  \"640x480\"<\/span>, label<\/span>:  \"640 x 480 (VGA)\"<\/span>  },\n\n{ value<\/span>:  \"576x486\"<\/span>, label<\/span>:  \"576 x 486 (NTSC)\"<\/span>  },\n\n{ value<\/span>:  \"320x480\"<\/span>, label<\/span>:  \"320 x 480 (HVGA)\"<\/span>  },\n\n],\n\n...\n\n};\n\n}\n\n}\n\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The above are the most commonly used aspect ratios. We will not proceed to generate the converted videos once the Cloudinary upload is done:<\/p>\n
\n\/\/ pages\/index.vue<\/span>\n\nexport<\/span>  default<\/span>  {\n\ndata()  {\n\nreturn<\/span>  {\n\n...\n\nvideos: [],\n\n};\n\n},\n\nmethods<\/span>:  {\n\n...\n\nasync  submit()  {\n\n...\n\nthis.generateVideos();\n\n},\n\ngenerateVideos()  {\n\nthis<\/span>.videos  =  this<\/span>.aspectRatios.map((ratio<\/span>)  =><\/span>  ({\n\nratio,\n\nurl<\/span>:  this<\/span>.$cloudinary.video.url(this<\/span>.cloudinaryVideo.public_id,  {\n\nwidth<\/span>:  parseInt<\/span>(ratio.value.split(\"x\"<\/span>)[0<\/span>]),\n\nheight<\/span>:  parseInt<\/span>(ratio.value.split(\"x\"<\/span>)[1<\/span>]),\n\ncrop<\/span>:  \"crop\"<\/span>,\n\n}),\n\nelement<\/span>:  this<\/span>.$cloudinary.video.element(this<\/span>.cloudinaryVideo.public_id,  {\n\nwidth<\/span>:  parseInt<\/span>(ratio.value.split(\"x\"<\/span>)[0<\/span>]),\n\nheight<\/span>:  parseInt<\/span>(ratio.value.split(\"x\"<\/span>)[1<\/span>]),\n\ncrop<\/span>:  \"crop\"<\/span>,\n\ncontrols<\/span>:  true<\/span>,\n\n})\n\n.toHtml(),\n\n}));\n\n},\n\n},\n\n};\n\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The above piece of code triggers the generate videos method once the upload is complete. This method iterates through each of the aspect ratios generating transformed URLS and transformed HTML video elements. This is by making use of the <\/code>$cloudinary.video.URL and the $cloudinary.video.element<\/code> methods passing in the width and the height. The output is stored in the video<\/code> state variable. We will not iterate this state variable to render the video and the download link to our users:<\/p>\n
\n<!-- pages\/index.vue --><\/span>\n\n<ul<\/span> role<\/span>=\"list\"<\/span>  ><\/span>\n\n<li<\/span> v-for<\/span>=\"(video, index) in videos\"<\/span>  :key<\/span>=\"index\"<\/span>><\/span>\n\n<div<\/span>><\/span>\n\n<div<\/span> v-html<\/span>=\"video.element\"<\/span>><\/span><\/div<\/span>><\/span>\n\n<div<\/span>><\/span>\n\n<div<\/span>><\/span>\n\n<h3<\/span>><\/span>{{ video.ratio.label }}<\/h3<\/span>><\/span>\n\n<a<\/span> target<\/span>=\"_blank\"<\/span>  :href<\/span>=\"video.url\"<\/span>  ><\/span>\n\nDownload\n\n<\/a<\/span>><\/span>\n\n<\/div<\/span>><\/span>\n\n<\/div<\/span>><\/span>\n\n<\/div<\/span>><\/span>\n\n<\/li<\/span>><\/span>\n\n<\/ul<\/span>><\/span>\n\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Conclusion<\/h2>\n
Using the above tutorial, we have been able to dynamically change video aspect ratios<\/a> in our applications. There are additional options we can specify to better customize our experience. Feel free to read more on the video transformations documentation page<\/a>.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":27913,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,372,371,303],"class_list":["post-27912","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-nuxtjs","tag-under-review","tag-video"],"acf":[],"yoast_head":"\nVideo aspect ratio editor using Nuxt.Js<\/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\/video-aspect-ratio-editor-using-nuxt-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Video aspect ratio editor using Nuxt.Js\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/video-aspect-ratio-editor-using-nuxt-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-10-25T15:28:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-07T22:40:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681925915\/Web_Assets\/blog\/d68086066778ab15a89240e441d22549955bed3e-800x600-1_279137f329\/d68086066778ab15a89240e441d22549955bed3e-800x600-1_279137f329-png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\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\/video-aspect-ratio-editor-using-nuxt-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/video-aspect-ratio-editor-using-nuxt-js\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Video aspect ratio editor using Nuxt.Js\",\"datePublished\":\"2021-10-25T15:28:05+00:00\",\"dateModified\":\"2023-07-07T22:40:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/video-aspect-ratio-editor-using-nuxt-js\/\"},\"wordCount\":7,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/video-aspect-ratio-editor-using-nuxt-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925915\/Web_Assets\/blog\/d68086066778ab15a89240e441d22549955bed3e-800x600-1_279137f329\/d68086066778ab15a89240e441d22549955bed3e-800x600-1_279137f329.png?_i=AA\",\"keywords\":[\"Guest Post\",\"NuxtJS\",\"Under Review\",\"Video\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2021\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/video-aspect-ratio-editor-using-nuxt-js\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/video-aspect-ratio-editor-using-nuxt-js\/\",\"name\":\"Video aspect ratio editor using Nuxt.Js\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/video-aspect-ratio-editor-using-nuxt-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/video-aspect-ratio-editor-using-nuxt-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925915\/Web_Assets\/blog\/d68086066778ab15a89240e441d22549955bed3e-800x600-1_279137f329\/d68086066778ab15a89240e441d22549955bed3e-800x600-1_279137f329.png?_i=AA\",\"datePublished\":\"2021-10-25T15:28:05+00:00\",\"dateModified\":\"2023-07-07T22:40:45+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/video-aspect-ratio-editor-using-nuxt-js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/video-aspect-ratio-editor-using-nuxt-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/video-aspect-ratio-editor-using-nuxt-js\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925915\/Web_Assets\/blog\/d68086066778ab15a89240e441d22549955bed3e-800x600-1_279137f329\/d68086066778ab15a89240e441d22549955bed3e-800x600-1_279137f329.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925915\/Web_Assets\/blog\/d68086066778ab15a89240e441d22549955bed3e-800x600-1_279137f329\/d68086066778ab15a89240e441d22549955bed3e-800x600-1_279137f329.png?_i=AA\",\"width\":800,\"height\":600},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/video-aspect-ratio-editor-using-nuxt-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Video aspect ratio editor using Nuxt.Js\"}]},{\"@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":"Video aspect ratio editor using Nuxt.Js","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\/video-aspect-ratio-editor-using-nuxt-js\/","og_locale":"en_US","og_type":"article","og_title":"Video aspect ratio editor using Nuxt.Js","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/video-aspect-ratio-editor-using-nuxt-js\/","og_site_name":"Cloudinary Blog","article_published_time":"2021-10-25T15:28:05+00:00","article_modified_time":"2023-07-07T22:40:45+00:00","og_image":[{"width":800,"height":600,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681925915\/Web_Assets\/blog\/d68086066778ab15a89240e441d22549955bed3e-800x600-1_279137f329\/d68086066778ab15a89240e441d22549955bed3e-800x600-1_279137f329-png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/video-aspect-ratio-editor-using-nuxt-js\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/video-aspect-ratio-editor-using-nuxt-js\/"},"author":{"name":"","@id":""},"headline":"Video aspect ratio editor using Nuxt.Js","datePublished":"2021-10-25T15:28:05+00:00","dateModified":"2023-07-07T22:40:45+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/video-aspect-ratio-editor-using-nuxt-js\/"},"wordCount":7,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/video-aspect-ratio-editor-using-nuxt-js\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925915\/Web_Assets\/blog\/d68086066778ab15a89240e441d22549955bed3e-800x600-1_279137f329\/d68086066778ab15a89240e441d22549955bed3e-800x600-1_279137f329.png?_i=AA","keywords":["Guest Post","NuxtJS","Under Review","Video"],"inLanguage":"en-US","copyrightYear":"2021","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/video-aspect-ratio-editor-using-nuxt-js\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/video-aspect-ratio-editor-using-nuxt-js\/","name":"Video aspect ratio editor using Nuxt.Js","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/video-aspect-ratio-editor-using-nuxt-js\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/video-aspect-ratio-editor-using-nuxt-js\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925915\/Web_Assets\/blog\/d68086066778ab15a89240e441d22549955bed3e-800x600-1_279137f329\/d68086066778ab15a89240e441d22549955bed3e-800x600-1_279137f329.png?_i=AA","datePublished":"2021-10-25T15:28:05+00:00","dateModified":"2023-07-07T22:40:45+00:00","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/video-aspect-ratio-editor-using-nuxt-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/video-aspect-ratio-editor-using-nuxt-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/video-aspect-ratio-editor-using-nuxt-js\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925915\/Web_Assets\/blog\/d68086066778ab15a89240e441d22549955bed3e-800x600-1_279137f329\/d68086066778ab15a89240e441d22549955bed3e-800x600-1_279137f329.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925915\/Web_Assets\/blog\/d68086066778ab15a89240e441d22549955bed3e-800x600-1_279137f329\/d68086066778ab15a89240e441d22549955bed3e-800x600-1_279137f329.png?_i=AA","width":800,"height":600},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/video-aspect-ratio-editor-using-nuxt-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Video aspect ratio editor using Nuxt.Js"}]},{"@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\/v1681925915\/Web_Assets\/blog\/d68086066778ab15a89240e441d22549955bed3e-800x600-1_279137f329\/d68086066778ab15a89240e441d22549955bed3e-800x600-1_279137f329.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27912","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=27912"}],"version-history":[{"count":2,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27912\/revisions"}],"predecessor-version":[{"id":30205,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27912\/revisions\/30205"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/27913"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=27912"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=27912"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=27912"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
An upload preset is a pre-determined set of options to be applied to a file upload on Cloudinary. To create an upload preset, proceed to the create upload preset<\/a> page. We recommend using the following defaults:<\/p>\n