{"id":1978,"date":"2016-09-29T14:00:53","date_gmt":"2016-09-29T13:00:53","guid":{"rendered":"https:\/\/blogs.ncl.ac.uk\/web\/?p=1978"},"modified":"2016-09-29T11:40:54","modified_gmt":"2016-09-29T10:40:54","slug":"a-quick-guide-toembedding-videos-in-t4","status":"publish","type":"post","link":"https:\/\/blogs.ncl.ac.uk\/web\/2016\/09\/29\/a-quick-guide-toembedding-videos-in-t4\/","title":{"rendered":"A Quick Guide to\u2026Embedding Videos in T4"},"content":{"rendered":"<p>For University web editors who have gone through Go Mobile and are using T4 to edit their sites, here\u2019s a refresher on how to embed video content.<\/p>\n<p>In the new responsive template videos are embedded using the content type \u2018<strong>06. External Media<\/strong>\u2019. They should be <strong>hosted on a dedicated delivery service<\/strong>, eg YouTube.<\/p>\n<p>Before embedding a video you should check that it <strong>relates to and supports your written content<\/strong>.<\/p>\n<p>You should also check the\u00a0<strong>thumbnail for the video. <\/strong>If it&#8217;s caught between frames or doesn&#8217;t seem appropriate, don\u2019t use the video and flag the issue with whoever uploaded it to the channel.<\/p>\n<h2>Embed code<\/h2>\n<p>When adding a video to your content always <strong>take the web address from the video&#8217;s embed code<\/strong>.<\/p>\n<div id=\"attachment_1982\" style=\"width: 594px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2016\/09\/youtube-screen-shot.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1982\" class=\"size-large wp-image-1982\" src=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2016\/09\/youtube-screen-shot-1024x646.png\" alt=\"Screenshot of protecting coral reefs video on YouTube\" width=\"584\" height=\"368\" srcset=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2016\/09\/youtube-screen-shot-1024x646.png 1024w, https:\/\/blogs.ncl.ac.uk\/web\/files\/2016\/09\/youtube-screen-shot-300x189.png 300w, https:\/\/blogs.ncl.ac.uk\/web\/files\/2016\/09\/youtube-screen-shot-768x485.png 768w, https:\/\/blogs.ncl.ac.uk\/web\/files\/2016\/09\/youtube-screen-shot-475x300.png 475w, https:\/\/blogs.ncl.ac.uk\/web\/files\/2016\/09\/youtube-screen-shot.png 1280w\" sizes=\"auto, (max-width: 584px) 100vw, 584px\" \/><\/a><p id=\"caption-attachment-1982\" class=\"wp-caption-text\">Protecting coral reefs video on YouTube<\/p><\/div>\n<p>You\u2019ll also need to make sure the option to <strong>&#8216;show suggested videos when the video finishes&#8217; is unchecked<\/strong>. Otherwise you run the risk of unrelated videos, or worse competitors\u2019 videos, being pulled into your page.<\/p>\n<div id=\"attachment_1983\" style=\"width: 422px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2016\/09\/embed-code.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1983\" class=\"size-full wp-image-1983\" src=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2016\/09\/embed-code.png\" alt=\"Screenshot of embed code for a video on YouTube\" width=\"412\" height=\"418\" srcset=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2016\/09\/embed-code.png 412w, https:\/\/blogs.ncl.ac.uk\/web\/files\/2016\/09\/embed-code-296x300.png 296w\" sizes=\"auto, (max-width: 412px) 100vw, 412px\" \/><\/a><p id=\"caption-attachment-1983\" class=\"wp-caption-text\">Embed code for Protecting Coral Reefs video on YouTube<\/p><\/div>\n<h3>Example<\/h3>\n<p>The video embed code will look something like this: https:\/\/www.youtube.com\/embed\/X_skPHdKQgA?rel=0<\/p>\n<p>The code for the Protecting Coral Reefs video is X_skPHdKQgA, while the part of the code that ensures no additional videos are pulled in is: <strong>?rel=0.<\/strong><\/p>\n<h2>Adding to T4<\/h2>\n<p>When adding to T4:<\/p>\n<ul>\n<li>add the prefix and name of the video<\/li>\n<li>paste in the embed code to the Media URL field<\/li>\n<li>add a caption to give context (limited to 50 characters)<\/li>\n<li>don\u2019t duplicate the video title in the caption if already displayed in the media player<\/li>\n<li>select the most appropriate alignment for the video<\/li>\n<\/ul>\n<div id=\"attachment_1998\" style=\"width: 594px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2016\/09\/video-embed-screen-t4-1.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1998\" class=\"size-large wp-image-1998\" src=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2016\/09\/video-embed-screen-t4-1-1024x227.png\" alt=\"Screenshot of video embed screen in T4\" width=\"584\" height=\"129\" srcset=\"https:\/\/blogs.ncl.ac.uk\/web\/files\/2016\/09\/video-embed-screen-t4-1-1024x227.png 1024w, https:\/\/blogs.ncl.ac.uk\/web\/files\/2016\/09\/video-embed-screen-t4-1-300x66.png 300w, https:\/\/blogs.ncl.ac.uk\/web\/files\/2016\/09\/video-embed-screen-t4-1-768x170.png 768w, https:\/\/blogs.ncl.ac.uk\/web\/files\/2016\/09\/video-embed-screen-t4-1-500x111.png 500w, https:\/\/blogs.ncl.ac.uk\/web\/files\/2016\/09\/video-embed-screen-t4-1.png 1517w\" sizes=\"auto, (max-width: 584px) 100vw, 584px\" \/><\/a><p id=\"caption-attachment-1998\" class=\"wp-caption-text\">Screenshot of video embed screen in T4 (select to view larger image)<\/p><\/div>\n<h2>Alignment<\/h2>\n<p>On desktop, you can choose to align videos to the right of your content or make them full width so they stretch to the size of the screen.<\/p>\n<p>We recommend using the full width option with caution, though &#8211; this often reduces the quality of the video. It can also look more cluttered and can make it harder for the user to find the answers to their questions.<\/p>\n<p>On mobile, videos behave the same as images &#8211; stretching to fill the width of the screen and flowing below content.<\/p>\n<h2>Load time<\/h2>\n<p>We recommend that you only add <strong>one video per page<\/strong>. This is so that you don\u2019t bombard the user with too much video content, but more importantly so that you don\u2019t slow down the load time of the page.<\/p>\n<h2>Find out more<\/h2>\n<p>Check our <a href=\"https:\/\/internal.ncl.ac.uk\/web\/assets\/documents\/t4-cms-moderator-guide.pdf\">T4 Moderator guide<\/a> for how to embed external media (University login required).<\/p>\n<p>Visit our website to find further advice and <a href=\"https:\/\/internal.ncl.ac.uk\/web\/services\/video.htm\">support about video hosting<\/a> (University login required).<\/p>\n<h2>Related posts<\/h2>\n<ul>\n<li><a href=\"https:\/\/blogs.ncl.ac.uk\/web\/2016\/09\/21\/5-reasons-to-limit-video-content-on-your-site\/\">5 Reasons to Limit Video Content on your Site<\/a><\/li>\n<li><a href=\"https:\/\/blogs.ncl.ac.uk\/web\/2015\/06\/08\/how-to-improve-your-website-images-and-videos\/\">How to Improve your Website Images and Videos<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>For University web editors who have gone through Go Mobile and are using T4 to edit their sites, here\u2019s a refresher on how to embed video content. In the new responsive template videos are embedded using the content type \u201806. &hellip; <a href=\"https:\/\/blogs.ncl.ac.uk\/web\/2016\/09\/29\/a-quick-guide-toembedding-videos-in-t4\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1268,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,15],"tags":[31,53,92,68],"class_list":["post-1978","post","type-post","status-publish","format-standard","hentry","category-content","category-go-mobile","tag-content-management-system","tag-content-prioritisation","tag-content-standards","tag-video"],"_links":{"self":[{"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/posts\/1978","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/users\/1268"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/comments?post=1978"}],"version-history":[{"count":11,"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/posts\/1978\/revisions"}],"predecessor-version":[{"id":2001,"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/posts\/1978\/revisions\/2001"}],"wp:attachment":[{"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/media?parent=1978"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/categories?post=1978"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/tags?post=1978"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}