{"id":262,"date":"2019-11-07T00:50:59","date_gmt":"2019-11-07T00:50:59","guid":{"rendered":"http:\/\/mansavageproductions.com\/websitesvideos\/?p=262"},"modified":"2019-11-07T00:50:59","modified_gmt":"2019-11-07T00:50:59","slug":"how-to-embed-responsive-youtube-video-in-phone-mobile-website","status":"publish","type":"post","link":"http:\/\/mansavageproductions.com\/websitesvideos\/2019\/11\/07\/how-to-embed-responsive-youtube-video-in-phone-mobile-website\/","title":{"rendered":"How To Embed Responsive YouTube Video In Phone Mobile Website"},"content":{"rendered":"\n<p>First you will need to add the following to your style sheet.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">CSS<\/h4>\n\n\n\n<table class=\"wp-block-table\"><tbody><tr><td>123456789101112131415<\/td><td><code>.video-container {<\/code><code>position<\/code><code>: <\/code><code>relative<\/code><code>;<\/code><code>padding-bottom<\/code><code>: <\/code><code>56.25%<\/code><code>;<\/code><code>padding-top<\/code><code>: <\/code><code>30px<\/code><code>; <\/code><code>height<\/code><code>: <\/code><code>0<\/code><code>; <\/code><code>overflow<\/code><code>: <\/code><code>hidden<\/code><code>;<\/code><code>}<\/code>&nbsp;<code>.video-container iframe,<\/code><code>.video-container object,<\/code><code>.video-container <\/code><code>embed<\/code> <code>{<\/code><code>position<\/code><code>: <\/code><code>absolute<\/code><code>;<\/code><code>top<\/code><code>: <\/code><code>0<\/code><code>;<\/code><code>left<\/code><code>: <\/code><code>0<\/code><code>;<\/code><code>width<\/code><code>: <\/code><code>100%<\/code><code>;<\/code><code>height<\/code><code>: <\/code><code>100%<\/code><code>;<\/code><code>}<\/code><\/td><\/tr><\/tbody><\/table>\n\n\n\n<p>Next, edit add some HTML around your embed code.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">HTML<\/h4>\n\n\n\n<table class=\"wp-block-table\"><tbody><tr><td>1<\/td><td><code>&lt;<\/code><code>div<\/code> <code>class<\/code><code>=<\/code><code>\"video-container\"<\/code><code>&gt;&lt;<\/code><code>iframe<\/code> <code>width<\/code><code>=<\/code><code>\"853\"<\/code> <code>height<\/code><code>=<\/code><code>\"480\"<\/code> <code>src<\/code><code>=<\/code><code>\"<a href=\"https:\/\/www.youtube.com\/embed\/z9Ul9ccDOqE\">https:\/\/www.youtube.com\/embed\/z9Ul9ccDOqE<\/a>\"<\/code> <code>frameborder<\/code><code>=<\/code><code>\"0\"<\/code> <code>allowfullscreen&lt;\/iframe&lt;\/div&gt;<\/code><\/td><\/tr><\/tbody><\/table>\n\n\n\n<p>Videos should be responsive and ready to view on Tablets and Mobile devices.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>First you will need to add the following to your style sheet. CSS 123456789101112131415 .video-container {position: relative;padding-bottom: 56.25%;padding-top: 30px; height: 0; overflow: hidden;}&nbsp;.video-container iframe,.video-container object,.video-container embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;} Next, edit add some HTML around your embed code. HTML 1 &lt;div class=&#8221;video-container&#8221;&gt;&lt;iframe width=&#8221;853&#8243; height=&#8221;480&#8243; src=&#8221;https:\/\/www.youtube.com\/embed\/z9Ul9ccDOqE&#8221; frameborder=&#8221;0&#8243; allowfullscreen&lt;\/iframe&lt;\/div&gt; Videos should be responsive and [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-262","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"http:\/\/mansavageproductions.com\/websitesvideos\/wp-json\/wp\/v2\/posts\/262","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/mansavageproductions.com\/websitesvideos\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/mansavageproductions.com\/websitesvideos\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/mansavageproductions.com\/websitesvideos\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/mansavageproductions.com\/websitesvideos\/wp-json\/wp\/v2\/comments?post=262"}],"version-history":[{"count":1,"href":"http:\/\/mansavageproductions.com\/websitesvideos\/wp-json\/wp\/v2\/posts\/262\/revisions"}],"predecessor-version":[{"id":263,"href":"http:\/\/mansavageproductions.com\/websitesvideos\/wp-json\/wp\/v2\/posts\/262\/revisions\/263"}],"wp:attachment":[{"href":"http:\/\/mansavageproductions.com\/websitesvideos\/wp-json\/wp\/v2\/media?parent=262"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/mansavageproductions.com\/websitesvideos\/wp-json\/wp\/v2\/categories?post=262"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/mansavageproductions.com\/websitesvideos\/wp-json\/wp\/v2\/tags?post=262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}