  {"id":1513,"date":"2023-11-08T15:45:26","date_gmt":"2023-11-08T20:45:26","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=1513"},"modified":"2025-06-23T10:33:23","modified_gmt":"2025-06-23T14:33:23","slug":"video-embeds","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/mastery\/module-4-embed-blocks\/video-embeds\/","title":{"rendered":"Video Embeds"},"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 Embeds\n                    <\/h1>\n                \n                                \n                                    \n\n<p>Module 4.1 \u2013 Mastery: Embed Blocks: Video Embeds<\/p>\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\/block-library\/embed-blocks\/video-embeds\/\">Examples: Video Embeds<\/a><\/div>\n<\/div>\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>\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>There are two ways to work with video in cuTheme:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Use the <strong class=\"myprefix-text-bold\"><em class=\"myprefix-text-italic\">video post type <\/em><\/strong>to upload, categorize, and display video galleries (<a href=\"https:\/\/carleton.ca\/cutheme-docs\/advanced\/module-1-advanced-content-types\/videos\/\">find out more in Module 1, advanced content<\/a>)<\/li>\n\n\n\n<li>Use the video embed block to add videos directly to your pages&nbsp;<\/li>\n<\/ol>\n\n\n\n<p>In this module, you will learn about option 2, embedding videos right into your pages using the video embed block. <\/p>\n\n\n\n<p>*Please note, that videos are not uploaded directly to your website. Instead, upload them to a service (we recommend YouTube) and then embed them into your web pages.<\/p>\n\n\n\n<h2 id=\"step-by-step\" class=\"wp-block-heading\">Step-by-Step<\/h2>\n\n\n\n<p><strong class=\"myprefix-text-bold\">1.<\/strong> <a href=\"https:\/\/carleton.ca\/cutheme-docs\/getting-started\/module-3-essential-text-blocks\/module-3-blocks-overview\/#addblock\">Add the&nbsp;Video Embed block using the block menu.<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"184\" height=\"164\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-10-at-10.49.46@2x.png\" alt=\"add a video embed block\" class=\"wp-image-1556\" style=\"width:123px;height:auto\"\/><\/figure>\n\n\n\n<p><strong class=\"myprefix-text-bold\">2.<\/strong> Enter the URL for your video and click <strong class=\"myprefix-text-bold\">Embed<\/strong>. You can embed videos from YouTube, Kaltura, or TED.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"212\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-10-at-10.53.36@2x-1024x212.png\" alt=\"Video Embed block\" class=\"wp-image-1557\" style=\"width:690px;height:auto\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-10-at-10.53.36@2x-1024x212.png 1024w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-10-at-10.53.36@2x-320x66.png 320w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-10-at-10.53.36@2x-512x106.png 512w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-10-at-10.53.36@2x-768x159.png 768w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-10-at-10.53.36@2x-1536x318.png 1536w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-10-at-10.53.36@2x.png 1778w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong class=\"myprefix-text-bold\">3.<\/strong> Use the video embed toolbar to select Wide Width if you would like to expand your video across the screen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"528\" height=\"316\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-10-at-10.59.15@2x.png\" alt=\"Wide width video\" class=\"wp-image-1561\" style=\"width:245px;height:auto\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-10-at-10.59.15@2x.png 528w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-10-at-10.59.15@2x-320x192.png 320w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/11\/CleanShot-2023-11-10-at-10.59.15@2x-512x306.png 512w\" sizes=\"auto, (max-width: 528px) 100vw, 528px\" \/><\/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--white w-screen ml-offset-center px-4 md:px-6 lg:px-12\"><div class=\"cu-max-w-child-5xl space-y-6 md:space-y-10   cu-prose-first-last\"><figure class=\"cu-figure not-prose  max-w-full\"><div class=\"not-prose overflow-hidden bg-white shadow-lg max-w-full rounded-none\"><div class=\"relative none overflow-hidden w-full pb-[56.25%] border border-cu-black-100\"><iframe title=\"Videos Embed\" src=\"https:\/\/www.youtube.com\/embed\/gvZmFTaFUWI\" class=\"cu-embed-iframe\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/div><\/div><\/figure><\/div><\/div>\n\n\n\n<p><strong class=\"myprefix-text-bold\"><em class=\"myprefix-text-italic\">Note<\/em><\/strong>: For Kaltura (Mediaspace) videos, please use the URL in the &#8220;Share&#8221; option (not the address bar) in order for it to work correctly!<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"556\" height=\"430\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/06\/media-space.png\" alt=\"Kaltura screenshot\" class=\"wp-image-4756\" style=\"width:252px;height:auto\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/06\/media-space.png 556w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/06\/media-space-512x396.png 512w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/06\/media-space-320x247.png 320w\" sizes=\"auto, (max-width: 556px) 100vw, 556px\" \/><\/figure>\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-embeds\">\n                <span class=\"flex-1 ml-auto text-left break-words whitespace-normal cu-icon\">\n                    Transcript \u2013 Video Embeds\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-embeds\">\n            \n\n<p>Hello and welcome to cuTheme Mastery Training, Module 4. In this video, we will cover video embeds.<\/p>\n\n\n\n<p>Earlier in training, we covered video posts, which are one of two ways to add a video to your site. Video Embeds are the other way. The main difference between the two is that video embeds are not posts, but rather a video that is simply embedded within a page. Video Posts have their own link and post, while video embeds do not.<\/p>\n\n\n\n<p>To add a video embed, go to the block selection menu, go down to \u201cEmbed\u201d, and click \u201cVideo Embed\u201d.<\/p>\n\n\n\n<p>Just like for video posts, a video must be hosted on either YouTube, Vimeo, Kaltura or TED to be embedded.<\/p>\n\n\n\n<p>To embed the video, go to the tab the video is located in. I\u2019ve got this one right here. Copy it, and paste it within the box, and click embed.<\/p>\n\n\n\n<p>And just like that, you have a video embed.<\/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 have learned how to work with the video block, it&#8217;s time to try it out!<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Add a video embed block to your page<\/li>\n\n\n\n<li>Enter the URL of your video<\/li>\n\n\n\n<li>Change video to display at a wide width<\/li>\n\n\n\n<li>View your handy work on the front end<\/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\/mastery\/module-4-embed-blocks\/power-bi-embeds\/\">Next: Power BI Embeds<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>There are two ways to work with video in cuTheme: In this module, you will learn about option 2, embedding videos right into your pages using the video embed block. *Please note, that videos are not uploaded directly to your website. Instead, upload them to a service (we recommend YouTube) and then embed them into [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":2084,"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":[11],"class_list":["post-1513","page","type-page","status-publish","hentry","cu_page_type-general"],"acf":{"cu_post_thumbnail":""},"_links":{"self":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/1513","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\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/comments?post=1513"}],"version-history":[{"count":4,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/1513\/revisions"}],"predecessor-version":[{"id":4757,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/1513\/revisions\/4757"}],"up":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/2084"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/media?parent=1513"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/cu_page_type?post=1513"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}