  {"id":548,"date":"2023-10-26T13:27:34","date_gmt":"2023-10-26T17:27:34","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=548"},"modified":"2024-09-18T20:31:30","modified_gmt":"2024-09-19T00:31:30","slug":"videos","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/advanced\/module-1-advanced-content-types\/videos\/","title":{"rendered":"Video Post"},"content":{"rendered":"\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n            <div class=\"cu-textmedia flex flex-col lg:flex-row mx-auto gap-6 md:gap-10 my-6 md:my-12 first:mt-0 max-w-5xl\">\n        <div class=\"justify-start cu-textmedia-content cu-prose-first-last\" style=\"flex: 0 0 100%;\">\n            <header class=\"font-light prose-xl cu-pageheader md:prose-2xl cu-component-updated cu-prose-first-last\">\n                                    <h1 class=\"cu-prose-first-last font-semibold !mt-2 mb-4 md:mb-6 relative after:absolute after:h-px after:bottom-0 after:bg-cu-red after:left-px text-3xl md:text-4xl lg:text-5xl lg:leading-[3.5rem] pb-5 after:w-10 text-cu-black-700 not-prose\">\n                        Video Post\n                    <\/h1>\n                \n                                \n                                    \n\n\n<p>Module 1.3 \u2013 Advanced: Advanced Content: Video Posts&nbsp;<\/p>\n\n\n\n                            <\/header>\n\n                    <\/div>\n\n            <\/div>\n\n    <\/div>\n<\/section>\n\n\n\n\n<div class=\"w-full max-w-xl mx-auto overflow-hidden bg-white rounded-lg shadow-lg cu-stackedlist cu-component not-contained not-prose\">\n    <h2 class=\"px-6 py-4 text-base font-semibold border-b rounded-t-lg md:text-xl bg-gray-50 text-cu-black-800\">\n        Table of Contents\n    <\/h2>\n    <div class=\"grid cu-scrollto cu-stackedlist--toc cu-stackedlist--1 md:grid-cols-1\">\n            <div class=\"space-y-1\">\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        1.\n                    <\/span>\n\n                    <a href=\"#step-by-step\" class=\"font-medium hover:underline\">\n                        Step-By-Step\n                    <\/a>\n                <\/div>\n\n                                        <div class=\"space-y-1\">\n                    \n            <div class=\"pl-10 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        1.1\n                    <\/span>\n\n                    <a href=\"#add-a-video-post\" class=\"font-medium hover:underline\">\n                        Add a Video Post\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-10 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        1.2\n                    <\/span>\n\n                    <a href=\"#edit-the-banner\" class=\"font-medium hover:underline\">\n                        Edit the Banner\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-10 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        1.3\n                    <\/span>\n\n                    <a href=\"#embed-url\" class=\"font-medium hover:underline\">\n                        Embed URL\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n            <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        2.\n                    <\/span>\n\n                    <a href=\"#video-tutorial\" class=\"font-medium hover:underline\">\n                        Video Tutorial\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        3.\n                    <\/span>\n\n                    <a href=\"#try-it-out\" class=\"font-medium hover:underline\">\n                        Try it Out!\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n            <\/div>\n\n    <\/div>\n<\/div>\n\n\n\n<p>Video can be a great way to support and enhance your content. <\/p>\n\n\n\n<p><strong class=\"myprefix-text-bold\"><em class=\"myprefix-text-italic\">*Please note<\/em><\/strong>, that videos are not uploaded directly to your website. Instead, you upload them to a service such as YouTube and embed them into your site.<\/p>\n\n\n\n<p>There are two ways to work with video:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Use the video post type to upload, categorize, and display video galleries<\/li>\n\n\n\n<li>Use the <a href=\"https:\/\/carleton.ca\/cutheme-docs\/mastery\/module-2-design-block-mastery\/video-embeds\/\">video embed block<\/a> to add videos directly to your pages <\/li>\n<\/ol>\n\n\n\n<p>In this lesson, you will learn how to use the first option &#8211; the video post type:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"836\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-27-at-13.35.32@2x-1024x836.png\" alt=\"Video post in cuTheme\" class=\"wp-image-686\" style=\"aspect-ratio:1.2244897959183674;width:868px;height:auto\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-27-at-13.35.32@2x-1024x836.png 1024w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-27-at-13.35.32@2x-320x261.png 320w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-27-at-13.35.32@2x-512x418.png 512w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-27-at-13.35.32@2x-768x627.png 768w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-27-at-13.35.32@2x-1536x1254.png 1536w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-27-at-13.35.32@2x.png 1560w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 id=\"step-by-step\" class=\"wp-block-heading\">Step-By-Step<\/h2>\n\n\n\n<h3 id=\"add-a-video-post\" class=\"wp-block-heading\">Add a Video Post<\/h3>\n\n\n\n<p><strong class=\"myprefix-text-bold\">1. <\/strong>From the dashboard, go over to the left side of the screen, hover over&nbsp;<strong class=\"myprefix-text-bold\">Videos<\/strong>,&nbsp;and click&nbsp;<strong>Add New<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"588\" height=\"242\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-27-at-13.37.13@2x.png\" alt=\"Create a video post\" class=\"wp-image-688\" style=\"aspect-ratio:2.4297520661157024;width:218px;height:auto\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-27-at-13.37.13@2x.png 588w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-27-at-13.37.13@2x-320x132.png 320w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-27-at-13.37.13@2x-512x211.png 512w\" sizes=\"auto, (max-width: 588px) 100vw, 588px\" \/><\/figure>\n\n\n\n<h3 id=\"edit-the-banner\" class=\"wp-block-heading\">Edit the Banner<\/h3>\n\n\n\n<p><strong class=\"myprefix-text-bold\">2.<\/strong> Click in the banner area to add a title and description. <\/p>\n\n\n\n<h3 id=\"embed-url\" class=\"wp-block-heading\">Embed URL<\/h3>\n\n\n\n<p><strong class=\"myprefix-text-bold\">3. <\/strong>Copy and paste the URL of your uploaded video into the text field then click <strong class=\"myprefix-text-bold\">Embed<\/strong>. Videos from YouTube, Vimeo, Kaltura, and TED can be embedded.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"483\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-27-at-13.38.35@2x-1024x483.png\" alt=\"Video embed\" class=\"wp-image-691\" style=\"aspect-ratio:2.12008281573499;width:709px;height:auto\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-27-at-13.38.35@2x-1024x483.png 1024w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-27-at-13.38.35@2x-320x151.png 320w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-27-at-13.38.35@2x-512x242.png 512w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-27-at-13.38.35@2x-768x362.png 768w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-27-at-13.38.35@2x-1536x725.png 1536w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-27-at-13.38.35@2x.png 1916w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong class=\"myprefix-text-bold\">4.<\/strong> Videos can be categorized &#8211; a useful tool for organizing an pulling specific videos onto a part ot your site. See <a href=\"https:\/\/carleton.ca\/cutheme-docs\/advanced\/module-2-cards-listing-blocks\/categories\/\">this tutorial to learn how<\/a>.<\/p>\n\n\n\n<p><strong class=\"myprefix-text-bold\">5.<\/strong> You can create video galleries by pulling video onto a page using a card block. <a href=\"https:\/\/carleton.ca\/cutheme-docs\/advanced\/module-2-cards-listing-blocks\/\">View this lesson <\/a>for details.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"548\" height=\"306\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-27-at-13.41.00@2x.png\" alt=\"Video categories\" class=\"wp-image-693\" style=\"aspect-ratio:1.7908496732026145;width:206px;height:auto\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-27-at-13.41.00@2x.png 548w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-27-at-13.41.00@2x-320x179.png 320w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-27-at-13.41.00@2x-512x286.png 512w\" sizes=\"auto, (max-width: 548px) 100vw, 548px\" \/><\/figure>\n\n\n\n<h2 id=\"video-tutorial\" class=\"wp-block-heading\">Video Tutorial<\/h2>\n\n\n\n<div class=\"cu-section cu-section-5xl not-contained  cu-prose cu-prose-dark\"><figure class=\"cu-embed cu-component not-contained mx-auto max-w-5xl\"><div class=\"relative w-full pb-[56.25%] overflow-hidden border border-cu-black-100\"><iframe title=\"Videos Embed\" src=\"https:\/\/www.youtube.com\/embed\/qxtANWFq7Q0\" class=\"cu-embed-iframe\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/div><\/figure><\/div>\n\n\n\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n        \n    \n    <dl class=\"cu-description cu-component-updated\">\n        \n    <div class=\"grid pt-4 pb-3 border-b accordion border-cu-black-100 md:pt-6 md:pb-5 first:border-t\">\n        <dt class=\"font-semibold not-prose\">\n            <button class=\"flex items-center justify-between w-full text-left accordion__button\" aria-expanded=\"false\" aria-controls=\"accordion-transcript-video-posts\">\n                <span class=\"flex-1 ml-auto text-left break-words whitespace-normal cu-icon\">\n                    Transcript &#8211; Video Posts\n                <\/span>\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewbox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\" class=\"w-5 h-5 ml-auto transition-transform rotate-0 accordion__icon text-cu-black-500\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.25 4.5l7.5 7.5-7.5 7.5\"><\/path>\n                <\/svg>\n            <\/button>\n        <\/dt>\n        <dd class=\"p-0 mt-0 cu-prose cu-prose-first-last accordion__content md:p-0 md:mt-0\" hidden=\"\" id=\"accordion-transcript-video-posts\">\n            \n\n<p>Hello and welcome to cuTheme Advanced Training, Module 1. In this video, we will cover video posts.<\/p>\n\n\n\n<p>A video post is one of two ways you may upload a video to your page. You can categorize these videos and place them in galleries.<\/p>\n\n\n\n<p>As a note, you cannot directly upload video files to your site. It should either uploaded to YouTube, Vimeo or Kaltura to be able to be added. Videos from TED can also be embedded.<\/p>\n\n\n\n<p>So, to add a video post, navigate to the&nbsp;<strong>sidebar<\/strong>. hover over&nbsp;<strong>\u201cVideos\u201d<\/strong>, and click&nbsp;<strong>\u201cAdd New\u201d<\/strong>.<\/p>\n\n\n\n<p>You can also add a video from the top menu. hover over&nbsp;<strong>\u201cNew\u201d<\/strong>, and click&nbsp;<strong>\u201cVideos\u201d<\/strong>.<\/p>\n\n\n\n<p>Once you click, you will be redirected from your current page to the new video post. You can give the post a title, and some text if you want. These are both optional.<\/p>\n\n\n\n<p>So, to add a video to this post, navigate over to the tab containing your video. I\u2019ve got this one from YouTube right here. I\u2019m going to copy the URL, paste it within the embed box, and click on embed. And just like that, I have a video post.&nbsp;<\/p>\n\n\n\n<p>Now, you might want to add a category to it, so that it can be easily grouped with similar content. To do that, go to the right menu, click on video, and go to categories.&nbsp;<\/p>\n\n\n\n<p>So I have categories here, for this one I\u2019m just going to add \u201cGeneral\u201d to it. You can also add a new video category if you want, but we will cover categories later in this training.<\/p>\n\n\n        <\/dd>\n    <\/div>\n\n\n    <\/dl>\n\n\n    <\/div>\n<\/section>\n\n\n\n<h2 id=\"try-it-out\" class=\"wp-block-heading\">Try it Out!<\/h2>\n\n\n\n<p>Now that you know how to create a video post type, try it out!<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Add a new video post.<\/li>\n\n\n\n<li>Give it a title and description.<\/li>\n\n\n\n<li>Add a YouTube video URL to the text field.<\/li>\n\n\n\n<li>Save your changes and preview the post.<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/carleton.ca\/cutheme-docs\/advanced\/module-1-advanced-content-types\/file-post\/\">Next: Files<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Video can be a great way to support and enhance your content. *Please note, that videos are not uploaded directly to your website. Instead, you upload them to a service such as YouTube and embed them into your site. There are two ways to work with video: In this lesson, you will learn how to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":525,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_cu_dining_location_slug":"","footnotes":"","_links_to":"","_links_to_target":""},"cu_page_type":[41,11],"class_list":["post-548","page","type-page","status-publish","hentry","cu_page_type-advanced-content-types","cu_page_type-general"],"acf":{"cu_post_thumbnail":false},"_links":{"self":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/548","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/comments?post=548"}],"version-history":[{"count":5,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/548\/revisions"}],"predecessor-version":[{"id":4300,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/548\/revisions\/4300"}],"up":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/525"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/media?parent=548"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/cu_page_type?post=548"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}