{"id":493,"date":"2021-11-10T12:56:58","date_gmt":"2021-11-10T17:56:58","guid":{"rendered":"https:\/\/www.marshall.edu\/website\/?page_id=493"},"modified":"2026-03-02T14:02:48","modified_gmt":"2026-03-02T19:02:48","slug":"youtube","status":"publish","type":"page","link":"https:\/\/www.marshall.edu\/marsha\/youtube\/","title":{"rendered":"YouTube"},"content":{"rendered":"<h2>YouTube Embed Shortcode<\/h2>\n<h3>mu_youtube Parameters<\/h3>\n<ul>\n<li><span class=\"inline bg-red-100 text-red-700 font-bold px-2 py-1 rounded-sm uppercase text-xs mr-2 my-1\">Required<\/span><strong>ID (id): <\/strong>The YouTube video ID. Find it in the video URL after <code>?v=<\/code> \u2014 for example, in <code>https:\/\/www.youtube.com\/watch?v=og5EzN2v1wE<\/code> the ID is <code>og5EzN2v1wE<\/code>.<\/li>\n<li><strong>URL (url): <\/strong>Alternatively, pass the full YouTube URL instead of the ID. The shortcode will extract the ID automatically.<\/li>\n<li><strong>Title (title): <\/strong>Optional. A title displayed below the video player. Also used as the accessible label for the embed.<\/li>\n<li><strong>Type (type): <\/strong>Controls how the video is displayed. Options:\n<ul>\n<li><code>embed<\/code> \u2014 Default. Displays an inline iframe video player.<\/li>\n<li><code>link<\/code> \u2014 Displays the video thumbnail with a play button overlay. Clicking opens the video on YouTube.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Show Title (show_title): <\/strong>Optional. Set to <code>false<\/code> to hide the title even if one is provided. Defaults to <code>true<\/code>.<\/li>\n<li><strong>Extra Classes (class): <\/strong>Optional. Additional CSS classes on the embed wrapper.<\/li>\n<\/ul>\n<h2>YouTube Shortcode Examples<\/h2>\n<h3>Basic Embed by ID<\/h3>\n\n<div x-data=\"{ copied: false, rawCode: '' }\" x-init=\"rawCode = $refs.codeSource.textContent\" class=\"mb-12\">\n\n\t\t\t<div class=\"px-6 py-6 border border-b-0 rounded-t-lg border-gray-200 bg-white\">\n\t\t\t\n<div\n\tclass=\"relative w-full aspect-video cursor-pointer overflow-hidden rounded-xl shadow-sm  \"\n\tx-data=\"{\n\t\tplayVideo: false,\n\t\tsrc: 'https:\/\/www.youtube.com\/embed\/og5EzN2v1wE?modestbranding=1&autoplay=1',\n\t\tplay() {\n\t\t\tthis.$refs.yt.src = this.src;\n\t\t\tthis.playVideo = true;\n\t\t},\n\t\tstop() {\n\t\t\tthis.$refs.yt.src = '';\n\t\t\tthis.playVideo = false;\n\t\t}\n\t}\"\n\t>\n\t<div class=\"group\/video relative\" x-on:click=\"play\">\n\t\t\t\t\t\t\t\t\t<img decoding=\"async\" x-show=\"!playVideo\" x-ref=\"video\" src=\"https:\/\/i3.ytimg.com\/vi_webp\/og5EzN2v1wE\/maxresdefault.webp\" alt=\"\" class=\"w-full h-full object-cover aspect-video\" \/>\n\t\t\t\t\t\n\t\t\t\t<div x-show=\"!playVideo\" class=\"absolute inset-0 bg-black\/5 transition-all duration-300 ease-out group-hover\/video:bg-black\/20\"><\/div>\n\n\t\t\t\t<div x-show=\"!playVideo\" class=\"absolute inset-0 flex items-center justify-center z-4\">\n\t\t\t<div class=\"w-16 h-16 md:w-20 md:h-20 bg-green rounded-2xl flex items-center justify-center shadow-lg transition-all duration-300 ease-out group-hover\/video:rounded-[50%] group-hover\/video:scale-110 group-hover\/video:shadow-xl\">\n\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"w-7 h-7 md:w-10 md:h-10 text-white hc:text-gray-900 contrast-more:text-gray-900 ml-1\">\n\t\t\t\t\t<path d=\"M8 5v14l11-7z\"\/>\n\t\t\t\t<\/svg>\n\t\t\t<\/div>\n\t\t<\/div>\n\n\t\t\t\t\t\t\t<div x-show=\"!playVideo\" class=\"absolute bottom-0 inset-x-0 h-1 bg-green hc:bg-gray-900 contrast-more:bg-gray-900 z-4 transition-opacity duration-300 ease-out group-hover\/video:opacity-0\"><\/div>\n\t\t\n\t\t\t\t\t\t\t<div x-show=\"!playVideo\" class=\"absolute bottom-0 inset-x-0 bg-green hc:bg-gray-900 contrast-more:bg-gray-900 px-5 py-3.5 flex items-center z-5 translate-y-full transition-transform duration-350 ease-out group-hover\/video:translate-y-0\">\n\t\t\t\t<span class=\"font-mont font-bold text-white text-sm md:text-base\">Why Marshall?<\/span>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t<div x-cloak x-show=\"playVideo\" class=\"relative aspect-video w-full\">\n\t\t<div x-on:click=\"stop\" class=\"absolute top-0 left-[50%] flex items-center justify-center bg-green text-white z-5 p-2 cursor-pointer\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" \/><\/svg>\n\t\t<\/div>\n\n\t\t<iframe loading=\"lazy\" x-ref=\"yt\" class=\"aspect-video w-full\" title=\"YouTube Video\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n\t<\/div>\n<\/div>\n\n\n\t\t<\/div>\n\t\n\t<div class=\"\">\n\t\t<div class=\"flex items-center justify-between px-4 py-2.5\" style=\"background: #181825; border-bottom: 1px solid rgba(255,255,255,.06);\">\n\t\t\t<span class=\"text-[11px] font-medium tracking-wide text-white\/40\" style=\"font-family: 'JetBrains Mono', ui-monospace, monospace;\">Shortcode<\/span>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\t@click=\"navigator.clipboard.writeText(rawCode); copied = true; setTimeout(() => copied = false, 2000)\"\n\t\t\t\tclass=\"flex items-center gap-1.5 px-3 py-1.5 rounded text-[11px] font-medium cursor-pointer transition-all duration-150\"\n\t\t\t\t:class=\"copied\n\t\t\t\t\t? 'bg-green\/20 text-green border border-green\/30'\n\t\t\t\t\t: 'bg-white\/8 text-white\/60 border border-white\/10 hover:bg-white\/14 hover:text-white\/90'\"\n\t\t\t\tstyle=\"font-family: 'JetBrains Mono', ui-monospace, monospace;\"\n\t\t\t>\n\t\t\t\t<template x-if=\"!copied\">\n\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n\t\t\t\t\t\t<rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"\/>\n\t\t\t\t\t\t<path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"\/>\n\t\t\t\t\t<\/svg>\n\t\t\t\t<\/template>\n\t\t\t\t<template x-if=\"copied\">\n\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n\t\t\t\t\t\t<polyline points=\"20 6 9 17 4 12\"\/>\n\t\t\t\t\t<\/svg>\n\t\t\t\t<\/template>\n\t\t\t\t<span x-text=\"copied ? 'Copied!' : 'Copy'\"><\/span>\n\t\t\t<\/button>\n\t\t<\/div>\n\t\t<div class=\"rounded-b-lg overflow-x-auto\" style=\"background: #1e1e2e;\">\n\t\t\t<pre class=\"px-5 py-4\"><code x-ref=\"codeSource\" class=\"language-bbcode text-[13px] leading-relaxed\" style=\"font-family: 'JetBrains Mono', ui-monospace, monospace; color: #cdd6f4;\">[mu_youtube id=&quot;og5EzN2v1wE&quot; title=&quot;Why Marshall?&quot;]<\/code><\/pre>\n\t\t<\/div>\n\t<\/div>\n\n<\/div>\n\n<h3>Embed by Full URL<\/h3>\n\n<div x-data=\"{ copied: false, rawCode: '' }\" x-init=\"rawCode = $refs.codeSource.textContent\" class=\"mb-12\">\n\n\t\t\t<div class=\"px-6 py-6 border border-b-0 rounded-t-lg border-gray-200 bg-white\">\n\t\t\t\n<div\n\tclass=\"relative w-full aspect-video cursor-pointer overflow-hidden rounded-xl shadow-sm  \"\n\tx-data=\"{\n\t\tplayVideo: false,\n\t\tsrc: 'https:\/\/www.youtube.com\/embed\/og5EzN2v1wE?modestbranding=1&autoplay=1',\n\t\tplay() {\n\t\t\tthis.$refs.yt.src = this.src;\n\t\t\tthis.playVideo = true;\n\t\t},\n\t\tstop() {\n\t\t\tthis.$refs.yt.src = '';\n\t\t\tthis.playVideo = false;\n\t\t}\n\t}\"\n\t>\n\t<div class=\"group\/video relative\" x-on:click=\"play\">\n\t\t\t\t\t\t\t\t\t<img decoding=\"async\" x-show=\"!playVideo\" x-ref=\"video\" src=\"https:\/\/i3.ytimg.com\/vi_webp\/og5EzN2v1wE\/maxresdefault.webp\" alt=\"\" class=\"w-full h-full object-cover aspect-video\" \/>\n\t\t\t\t\t\n\t\t\t\t<div x-show=\"!playVideo\" class=\"absolute inset-0 bg-black\/5 transition-all duration-300 ease-out group-hover\/video:bg-black\/20\"><\/div>\n\n\t\t\t\t<div x-show=\"!playVideo\" class=\"absolute inset-0 flex items-center justify-center z-4\">\n\t\t\t<div class=\"w-16 h-16 md:w-20 md:h-20 bg-green rounded-2xl flex items-center justify-center shadow-lg transition-all duration-300 ease-out group-hover\/video:rounded-[50%] group-hover\/video:scale-110 group-hover\/video:shadow-xl\">\n\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"w-7 h-7 md:w-10 md:h-10 text-white hc:text-gray-900 contrast-more:text-gray-900 ml-1\">\n\t\t\t\t\t<path d=\"M8 5v14l11-7z\"\/>\n\t\t\t\t<\/svg>\n\t\t\t<\/div>\n\t\t<\/div>\n\n\t\t\t\t\t\t\t<div x-show=\"!playVideo\" class=\"absolute bottom-0 inset-x-0 h-1 bg-green hc:bg-gray-900 contrast-more:bg-gray-900 z-4 transition-opacity duration-300 ease-out group-hover\/video:opacity-0\"><\/div>\n\t\t\n\t\t\t\t\t\t\t<div x-show=\"!playVideo\" class=\"absolute bottom-0 inset-x-0 bg-green hc:bg-gray-900 contrast-more:bg-gray-900 px-5 py-3.5 flex items-center z-5 translate-y-full transition-transform duration-350 ease-out group-hover\/video:translate-y-0\">\n\t\t\t\t<span class=\"font-mont font-bold text-white text-sm md:text-base\">Why Marshall?<\/span>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t<div x-cloak x-show=\"playVideo\" class=\"relative aspect-video w-full\">\n\t\t<div x-on:click=\"stop\" class=\"absolute top-0 left-[50%] flex items-center justify-center bg-green text-white z-5 p-2 cursor-pointer\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" \/><\/svg>\n\t\t<\/div>\n\n\t\t<iframe loading=\"lazy\" x-ref=\"yt\" class=\"aspect-video w-full\" title=\"YouTube Video\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n\t<\/div>\n<\/div>\n\n\n\t\t<\/div>\n\t\n\t<div class=\"\">\n\t\t<div class=\"flex items-center justify-between px-4 py-2.5\" style=\"background: #181825; border-bottom: 1px solid rgba(255,255,255,.06);\">\n\t\t\t<span class=\"text-[11px] font-medium tracking-wide text-white\/40\" style=\"font-family: 'JetBrains Mono', ui-monospace, monospace;\">Shortcode<\/span>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\t@click=\"navigator.clipboard.writeText(rawCode); copied = true; setTimeout(() => copied = false, 2000)\"\n\t\t\t\tclass=\"flex items-center gap-1.5 px-3 py-1.5 rounded text-[11px] font-medium cursor-pointer transition-all duration-150\"\n\t\t\t\t:class=\"copied\n\t\t\t\t\t? 'bg-green\/20 text-green border border-green\/30'\n\t\t\t\t\t: 'bg-white\/8 text-white\/60 border border-white\/10 hover:bg-white\/14 hover:text-white\/90'\"\n\t\t\t\tstyle=\"font-family: 'JetBrains Mono', ui-monospace, monospace;\"\n\t\t\t>\n\t\t\t\t<template x-if=\"!copied\">\n\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n\t\t\t\t\t\t<rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"\/>\n\t\t\t\t\t\t<path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"\/>\n\t\t\t\t\t<\/svg>\n\t\t\t\t<\/template>\n\t\t\t\t<template x-if=\"copied\">\n\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n\t\t\t\t\t\t<polyline points=\"20 6 9 17 4 12\"\/>\n\t\t\t\t\t<\/svg>\n\t\t\t\t<\/template>\n\t\t\t\t<span x-text=\"copied ? 'Copied!' : 'Copy'\"><\/span>\n\t\t\t<\/button>\n\t\t<\/div>\n\t\t<div class=\"rounded-b-lg overflow-x-auto\" style=\"background: #1e1e2e;\">\n\t\t\t<pre class=\"px-5 py-4\"><code x-ref=\"codeSource\" class=\"language-bbcode text-[13px] leading-relaxed\" style=\"font-family: 'JetBrains Mono', ui-monospace, monospace; color: #cdd6f4;\">[mu_youtube url=&quot;https:\/\/www.youtube.com\/watch?v=og5EzN2v1wE&quot; title=&quot;Why Marshall?&quot;]<\/code><\/pre>\n\t\t<\/div>\n\t<\/div>\n\n<\/div>\n\n<h3>Thumbnail Link (no inline player)<\/h3>\n\n<div x-data=\"{ copied: false, rawCode: '' }\" x-init=\"rawCode = $refs.codeSource.textContent\" class=\"mb-12\">\n\n\t\t\t<div class=\"px-6 py-6 border border-b-0 rounded-t-lg border-gray-200 bg-white\">\n\t\t\t<a href=\"https:\/\/www.youtube.com\/watch?v=og5EzN2v1wE\" class=\"\">\n\t<div class=\"h-full w-full relative bg-no-repeat bg-cover\" style=\"padding-bottom: 56.25%; height: 0; background-image: url(http:\/\/i3.ytimg.com\/vi\/og5EzN2v1wE\/maxresdefault.jpg);\">\n\t\t<div class=\"cursor-pointer absolute inset-0 bg-black\/40 lg:bg-black\/40 hover:bg-green\/40 flex flex-col pt-8\">\n\t\t\t<div class=\"flex items-center px-4 text-white\">\n\t\t\t\t<svg class=\"fill-current h-8 w-8 lg:h-10 lg:w-10 mr-3\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\"><path fill=\"currentColor\" d=\"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm115.7 272l-176 101c-15.8 8.8-35.7-2.5-35.7-21V152c0-18.4 19.8-29.8 35.7-21l176 107c16.4 9.2 16.4 32.9 0 42z\"><\/path><\/svg>\n\t\t\t\t<span class=\"text-xl lg:text-2xl font-semibold uppercase drop-shadow-xl\">Play Video<\/span>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/a>\n\n\t\t<\/div>\n\t\n\t<div class=\"\">\n\t\t<div class=\"flex items-center justify-between px-4 py-2.5\" style=\"background: #181825; border-bottom: 1px solid rgba(255,255,255,.06);\">\n\t\t\t<span class=\"text-[11px] font-medium tracking-wide text-white\/40\" style=\"font-family: 'JetBrains Mono', ui-monospace, monospace;\">Shortcode<\/span>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\t@click=\"navigator.clipboard.writeText(rawCode); copied = true; setTimeout(() => copied = false, 2000)\"\n\t\t\t\tclass=\"flex items-center gap-1.5 px-3 py-1.5 rounded text-[11px] font-medium cursor-pointer transition-all duration-150\"\n\t\t\t\t:class=\"copied\n\t\t\t\t\t? 'bg-green\/20 text-green border border-green\/30'\n\t\t\t\t\t: 'bg-white\/8 text-white\/60 border border-white\/10 hover:bg-white\/14 hover:text-white\/90'\"\n\t\t\t\tstyle=\"font-family: 'JetBrains Mono', ui-monospace, monospace;\"\n\t\t\t>\n\t\t\t\t<template x-if=\"!copied\">\n\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n\t\t\t\t\t\t<rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"\/>\n\t\t\t\t\t\t<path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"\/>\n\t\t\t\t\t<\/svg>\n\t\t\t\t<\/template>\n\t\t\t\t<template x-if=\"copied\">\n\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n\t\t\t\t\t\t<polyline points=\"20 6 9 17 4 12\"\/>\n\t\t\t\t\t<\/svg>\n\t\t\t\t<\/template>\n\t\t\t\t<span x-text=\"copied ? 'Copied!' : 'Copy'\"><\/span>\n\t\t\t<\/button>\n\t\t<\/div>\n\t\t<div class=\"rounded-b-lg overflow-x-auto\" style=\"background: #1e1e2e;\">\n\t\t\t<pre class=\"px-5 py-4\"><code x-ref=\"codeSource\" class=\"language-bbcode text-[13px] leading-relaxed\" style=\"font-family: 'JetBrains Mono', ui-monospace, monospace; color: #cdd6f4;\">[mu_youtube id=&quot;og5EzN2v1wE&quot; type=&quot;link&quot; title=&quot;Why Marshall?&quot;]<\/code><\/pre>\n\t\t<\/div>\n\t<\/div>\n\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>YouTube Embed Shortcode mu_youtube Parameters ID (id): The YouTube video ID. Find it in the video URL after ?v= \u2014 for example, in https:\/\/www.youtube.com\/watch?v=og5EzN2v1wE the ID is og5EzN2v1wE. URL (url): Alternatively, pass the full YouTube URL instead of the ID. The shortcode will extract the ID automatically. Title (title): Optional. A title displayed below the<\/p>\n","protected":false},"author":203,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-sidebar-left.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-493","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.marshall.edu\/marsha\/wp-json\/wp\/v2\/pages\/493","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.marshall.edu\/marsha\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.marshall.edu\/marsha\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.marshall.edu\/marsha\/wp-json\/wp\/v2\/users\/203"}],"replies":[{"embeddable":true,"href":"https:\/\/www.marshall.edu\/marsha\/wp-json\/wp\/v2\/comments?post=493"}],"version-history":[{"count":2,"href":"https:\/\/www.marshall.edu\/marsha\/wp-json\/wp\/v2\/pages\/493\/revisions"}],"predecessor-version":[{"id":866,"href":"https:\/\/www.marshall.edu\/marsha\/wp-json\/wp\/v2\/pages\/493\/revisions\/866"}],"wp:attachment":[{"href":"https:\/\/www.marshall.edu\/marsha\/wp-json\/wp\/v2\/media?parent=493"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}