{"id":419,"date":"2014-12-05T14:45:50","date_gmt":"2014-12-05T14:45:50","guid":{"rendered":"http:\/\/artsci.case.edu\/documentation\/?page_id=419"},"modified":"2015-10-01T15:47:19","modified_gmt":"2015-10-01T15:47:19","slug":"embedding-videos","status":"publish","type":"page","link":"https:\/\/artsci.case.edu\/documentation\/embedding-videos\/","title":{"rendered":"Embedding Videos"},"content":{"rendered":"<p id=\"embedding-with-a-url\" class=\"section-title\"><div class=\"row column-group-1\"><\/p>\n<div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\"><\/p>\n<p>To quickly embed a YouTube or Vimeo video, simply copy the video\u2019s URL from your web browser\u2019s address bar while viewing the video: <strong>http:\/\/www.youtube.com\/watch?v=JaN356Vpg-A<\/strong> Paste it on a line by itself in your post\/page Visual editor (make sure that\u00a0it is <strong>not<\/strong>\u00a0a link!). You can view and play the video directly from\u00a0the editor. \u00a0<\/p>\n<h3 id=\"embedding-with-a-shortcode\" class=\"section-title\">Embedding with a Shortcode<\/h3>\n<p>To customize the video\u2019s size and settings, use a shortcode. You can do this by copying the video URL, then create a shortcode using the format below. Be sure to replace the URL listed here with the URL of your video, and the code is on a line by itself.\u00a0NB: The shortcode will not give you a preview of the video in your editor, you will need to Preview or Publish your post first. <code>[youtube http:\/\/www.youtube.com\/watch?v=JaN356Vpg-A]<\/code> <code>[vimeo http:\/\/vimeo.com\/44633289<strong>]<\/strong><\/code> or <code>[vimeo 44633289]<\/code><\/p>\n<h3 id=\"embedding-a-playlist\" class=\"section-title\">Embedding a YouTube Playlist<\/h3>\n<p>You can also embed a YouTube playlist instead of a single video. Simply copy the playlist\u2019s URL from your web browser\u2019s address bar while viewing the playlist. Be sure to copy the full URL, including <code>&amp;list=\u2026<\/code> at the end. That copies the entire playlist instead of a single video. Then, paste it on a line by itself in the post\/page Visual editor\u00a0or create a shortcode using the format below. Be sure to replace the URL listed here with the URL of your video, and the code is on a line by itself. <code><strong>[youtube https:\/\/www.youtube.com\/watch?v=Dcz4vrC7uM8&amp;list=PL0F4EAE74C95BF2A5]<\/strong><\/code> The playlist will look something like this and can be viewed and played directly from the editor.<\/p>\n<p>\n<\/div>\n<div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\"><\/p>\n<p>\u00a0<span class=\"embed-youtube\"><span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><iframe class=\"youtube-player\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/videoseries?version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=en-US&#038;autohide=2&#038;wmode=transparent&#038;listType=playlist&#038;list=PL0F4EAE74C95BF2A5\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation\"><\/iframe><\/span><\/span><\/p>\n<p>&nbsp;<\/p>\n<p>\n<\/div>\n<p><\/div>\n<p>&nbsp;<\/p>\n<hr \/>\n<h4 class=\"section-title\">Video Customization Options<\/h4>\n<div class=\"row column-group-2\"><\/p>\n<div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\"><\/p>\n<p>You can specify the width and height of the embedded video by adding <code>&amp;w=...<\/code> or<code>&amp;w=...&amp;h=...<\/code>to the shortcode. It will automatically adapt to your theme\u2019s content length and give you preferred dimensions. You can disable related videos by appending <code>&amp;rel=0.<\/code> For example, this shortcode: <code><strong>[<\/strong><strong>youtube=http:\/\/www.youtube.com\/watch?v=JaNH56Vpg-A&amp;w=640&amp;h=385]<\/strong><\/code> <code><strong>[<\/strong><strong>vimeo 44633289 w=640&amp;h=385]<\/strong><\/code> produces this video, which is wider than the default embed without width &amp; height option settings.<\/p>\n<p><strong>More Examples:<\/strong><\/p>\n<ul>\n<li>To embed the video <strong>with default width and height adapted to your theme<\/strong>: <code>[youtube http:\/\/www.youtube.com\/watch?v=JaNH56Vpg-A]<\/code><\/li>\n<li>To specify the <strong>width and height<\/strong> explicitly: <code>[youtube http:\/\/www.youtube.com\/watch?v=JaNH56Vpg-A&amp;w=320&amp;h=240]<\/code><\/li>\n<li>To specify the <strong>width<\/strong> only: <code>[youtube http:\/\/www.youtube.com\/watch?v=JaNH56Vpg-A&amp;w=320]<\/code><\/li>\n<li>To <strong>hide the related videos<\/strong> from appearing after the video is done: <code>[youtube http:\/\/www.youtube.com\/watch?v=JaNH56Vpg-A&amp;rel=0]<\/code><\/li>\n<li>To <strong>start at a certain point in the video<\/strong>, convert the time of that point from minutes and seconds to all seconds, then add that number as shown (using an example start point of 1 minute 15 seconds): <code>[youtube http:\/\/www.youtube.com\/watch?v=JaNH56Vpg-A&amp;start=75]<\/code><\/li>\n<li><strong>To specify a start and end time for a video<\/strong>, do the same as the above but add the end time as shown: <code>[youtube http:\/\/www.youtube.com\/watch?v=JaNH56Vpg-A&amp;start=75&amp;end=85]<\/code><\/li>\n<li><strong>To hide the top information bar<\/strong>: <code>[youtube http:\/\/www.youtube.com\/watch?v=JaNH56Vpg-A&amp;showinfo=0]<\/code><\/li>\n<li><strong>To change the look of the player<\/strong>: <code>[youtube http:\/\/www.youtube.com\/watch?v=JaNH56Vpg-A&amp;theme=light]<\/code><\/li>\n<\/ul>\n<p>\n<\/div>\n<div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\"><\/p>\n<p>&nbsp;<\/p>\n<p><span class=\"embed-youtube\"><span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><iframe class=\"youtube-player\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/JaNH56Vpg-A?version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=en-US&#038;autohide=2&#038;wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation\"><\/iframe><\/span><\/span><\/p>\n<p>\n<\/div>\n<p><\/div>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p id=\"embedding-with-a-url\" class=\"section-title\">\n<p>&nbsp;<\/p>\n<p>Video Customization Options<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/artsci.case.edu\/documentation\/embedding-videos\/\" class=\"more-link\">Continue reading&#8230; <span class=\"screen-reader-text\">Embedding Videos<\/span><\/a><\/p>\n","protected":false},"author":19,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":{"spay_email":""},"_links":{"self":[{"href":"https:\/\/artsci.case.edu\/documentation\/wp-json\/wp\/v2\/pages\/419"}],"collection":[{"href":"https:\/\/artsci.case.edu\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/artsci.case.edu\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/artsci.case.edu\/documentation\/wp-json\/wp\/v2\/users\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/artsci.case.edu\/documentation\/wp-json\/wp\/v2\/comments?post=419"}],"version-history":[{"count":10,"href":"https:\/\/artsci.case.edu\/documentation\/wp-json\/wp\/v2\/pages\/419\/revisions"}],"predecessor-version":[{"id":625,"href":"https:\/\/artsci.case.edu\/documentation\/wp-json\/wp\/v2\/pages\/419\/revisions\/625"}],"wp:attachment":[{"href":"https:\/\/artsci.case.edu\/documentation\/wp-json\/wp\/v2\/media?parent=419"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}