{"id":517,"date":"2017-10-18T13:14:08","date_gmt":"2017-10-18T17:14:08","guid":{"rendered":"http:\/\/amy.imarketbeta.com\/blog\/?page_id=517"},"modified":"2017-11-14T12:20:38","modified_gmt":"2017-11-14T20:20:38","slug":"videos","status":"publish","type":"page","link":"http:\/\/amy.imarketbeta.com\/blog\/part-2-staff-user-guide\/creating-and-editing-pages-and-weblinks\/special-content-types\/videos\/","title":{"rendered":"Videos"},"content":{"rendered":"

Videos<\/h1>\n

Best practices<\/h2>\n

Videos should come from external sites (e.g. YouTube).
\n<\/b>We will not host videos (except in rare cases, such as hero background videos. In those cases, please open a ticket for Development to handle.)<\/p>\n

Videos should be embedded using the [!youtube_embed!]<\/code> shortcode (details below).
\n<\/b>If the video is not hosted on YouTube (occasionally videos are hosted on Vimeo or Facebook, e.g.), then we will use an alternate method to embed it. Please open a ticket to Development in this case.<\/p>\n

The [!youtube_embed!]<\/code> shortcode will not work on non-responsive websites.<\/strong>
\nIf you need to add a video to a non-responsive website, please open a ticket to Development.<\/p>\n

Adding a Video with the [!youtube_embed!] Shortcode<\/h2>\n

Using the [!youtube_embed!]<\/code> shortcode comes with a variety of benefits, including reducing page load speed (by loading the video only if<\/i> a user clicks the play button), and making sure that videos are responsive by default. All YouTube videos should be added to sites using this method.<\/p>\n

    \n
  1. Paste the following shortcode where you would like the video to appear:
    \n[!youtube_embed? &video_id=`12345<\/strong>` &mode=`image` &autoplay=`TRUE`!]<\/code><\/code><\/li>\n
  2. Replace 12345<\/b> with the ID<\/strong><\/span> of the YouTube video you want to embed.<\/li>\n
  3. Save, and visit the page on the site to make sure that the video appears how you expected it to.<\/li>\n
  4. Click the Play Button* on the video to make sure that the correct video has been added and will play on the site.<\/li>\n<\/ol>\n

    *<\/b>If you do not see a \u201cPlay\u201d button appear over the video, please open a ticket for Development requesting that the \u201cPlay\u201d button be added to videos on the site.<\/p>\n

    Example: <\/b><\/h3>\n

    Youtube Link: <\/b>https:\/\/www.youtube.com\/watch?v=xXAy_QU5WE8<\/strong><\/p>\n

    Video ID: <\/b>xXAy_QU5WE8<\/p>\n

    Final shortcode to add video to the page: <\/b>
    \n[!youtube_embed? &video_id=`xXAy_QU5WE8` &mode=`image` &autoplay=`true`!]<\/code><\/p>\n

    Output:
    \n<\/strong>\"\"<\/p>\n

    Wrapping Text<\/h2>\n

    If you want text to wrap around your video, add the <div class=\"image-right\"><\/div><\/code> or <div class=\"left\"><\/div><\/code> HTML tags around your video.<\/p>\n

    Note<\/strong>: This will require editing the resource’s content as HTML. You can click the HTML icon in the TinyMCE Toolbar <\/a>to open a dialog box with the content displayed in HTML. \"\"
    \n<\/em><\/p>\n

    Video to the right of text: <\/b><\/p>\n

    <\/p>\n

    <div class=\"image-right\">
    \n[!youtube_embed? &video_id=`12345` &mode=`image` &autoplay=`TRUE`!]
    \n<\/div><\/p>\n

    <\/code><\/p>\n

    Video to the left of text: <\/b><\/p>\n

    <\/p>\n

    <div class=\"image-left\">
    \n[!youtube_embed? &video_id=`12345` &mode=`image` &autoplay=`TRUE`!]
    \n<\/div><\/p>\n

    <\/code><\/p>\n

    Output:<\/strong>\"\"<\/p>\n

    Video Gallery<\/h2>\n

    Development can add functionality so that videos appear side by side in rows. This can be useful for pages with multiple videos, such as video galleries. To use this feature, modify your shortcode to the following (again, replacing the 12345<\/b> with your video\u2019s ID):<\/p>\n

    [!youtube_embed? &video_id=`12345` &mode=`image` &autoplay=`true` &container_tpl=`video_gallery_vid`!]<\/code><\/p>\n

    If the videos do not appear,<\/strong> it may be because the video gallery functionality is not installed on your site. In this case, please open a ticket to Development requesting we add this option.<\/p>\n

    \"\"
    Video – Gallery Option<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"

    How to add videos to webpage content areas.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":512,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/pages\/517"}],"collection":[{"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/comments?post=517"}],"version-history":[{"count":1,"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/pages\/517\/revisions"}],"predecessor-version":[{"id":1658,"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/pages\/517\/revisions\/1658"}],"up":[{"embeddable":true,"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/pages\/512"}],"wp:attachment":[{"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/media?parent=517"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/categories?post=517"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/amy.imarketbeta.com\/blog\/wp-json\/wp\/v2\/tags?post=517"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}