{"id":17445,"date":"2020-06-03T11:37:32","date_gmt":"2020-06-03T11:37:32","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&#038;p=17445"},"modified":"2020-06-03T12:41:19","modified_gmt":"2020-06-03T12:41:19","slug":"how-to-add-video-docking-in-amp","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/how-to-add-video-docking-in-amp\/","title":{"rendered":"How to add Video Docking in AMP"},"content":{"rendered":"\n<p>The Video Docking the option allows videos to be minimized to a corner and the video is playing manually, the video will be &#8220;docked&#8221; and float on a corner when the user scrolls out of the video component&#8217;s visual area. If the user scrolls back, the video reverts to its original static position. <\/p>\n\n\n\n<p>You will find this option in the\u00a0<strong>WordPress Dashboard<\/strong>\u00a0-> Navigate to\u00a0<strong>AMP option panel\u00a0<\/strong>->\u00a0<strong>Design<\/strong>\u00a0->\u00a0<strong>Single<\/strong>\u00a0-> Enable \u201c <strong>Video Docking <\/strong>\u201d option and then click on the \u201c<strong>Save Changes<\/strong>\u201d button. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"389\" height=\"410\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/06\/17.png\" alt=\"\" class=\"wp-image-17446\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/06\/17.png 389w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/06\/17-285x300.png 285w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/06\/17-47x50.png 47w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/06\/17-57x60.png 57w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/06\/17-95x100.png 95w\" sizes=\"(max-width: 389px) 100vw, 389px\" \/><\/figure><\/div>\n\n\n\n<p> Scroll down a little to see this option <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"846\" height=\"452\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/06\/18.png\" alt=\"\" class=\"wp-image-17447\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/06\/18.png 846w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/06\/18-300x160.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/06\/18-768x410.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/06\/18-50x27.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/06\/18-60x32.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/06\/18-100x53.png 100w\" sizes=\"(max-width: 846px) 100vw, 846px\" \/><\/figure>\n\n\n\n<h4>The Output of the Video Docking in AMP<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1019\" height=\"530\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/06\/1.png\" alt=\"\" class=\"wp-image-17453\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/06\/1.png 1019w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/06\/1-300x156.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/06\/1-768x399.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/06\/1-50x26.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/06\/1-60x31.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2020\/06\/1-100x52.png 100w\" sizes=\"(max-width: 1019px) 100vw, 1019px\" \/><\/figure>\n\n\n\n<p><strong>That\u2019s it for this tutorial!<\/strong><\/p>\n\n\n\n<p>We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.<\/p>\n<div id=\"div-1\" class=\"hkb-feedback\">\n\t\t\t<strong class=\"ht-mobile-exit__title\">Ask your Questions Directly!<\/strong><br>\n\t\t\t<div class=\"hkb_widget_exit__content\" style=\"font-size: 14px;\">If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!<\/div>\n\t\t\t<a href=\"https:\/\/ampforwp.com\/support\/#contact\" id=\"button\" target=\"_blank\" rel=\"noopener noreferrer\"><button>Yes, I have a Question<\/button><\/a>\n\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>The Video Docking the option allows videos to be minimized to a corner and the video is playing manually, the video will be &#8220;docked&#8221; and float on a corner when the user scrolls out of the video component&#8217;s visual area. If the user scrolls back, the video reverts to its&#8230;<\/p>\n","protected":false},"author":18,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[34],"ht-kb-tag":[],"_links":{"self":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/17445"}],"collection":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/comments?post=17445"}],"version-history":[{"count":6,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/17445\/revisions"}],"predecessor-version":[{"id":17454,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/17445\/revisions\/17454"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=17445"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=17445"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=17445"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}