{"id":2503,"date":"2014-01-21T03:52:08","date_gmt":"2014-01-21T07:52:08","guid":{"rendered":"http:\/\/www.searchenginegenie.com\/web-design-blog\/?p=2503"},"modified":"2014-01-21T04:42:04","modified_gmt":"2014-01-21T08:42:04","slug":"2503","status":"publish","type":"post","link":"https:\/\/www.searchenginegenie.com\/web-design-blog\/2503\/","title":{"rendered":"Flexible Video On screen Via HTML Responsive"},"content":{"rendered":"

The HTML draft specification introduced the video element for the purpose of playing videos or movies,partially replacing the object element. HTML video is intended by its creators to become the new standard way to show video on the web without plugins.<\/p>\n

 <\/p>\n

Source Code<\/strong><\/p>\n

 <\/p>\n

\"source\"<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2504\"\r\n <\/div><\/a><\/p>\n

CSS<\/strong><\/p>\n

Here I consider the total width as 700px;<\/p>\n

 <\/p>\n

\"css1\"<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2505\"\r\n <\/div><\/a><\/p>\n

So, Initially screen shot browser- Zoom 75%<\/p>\n

\"zoom-75\"<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2506\"\r\n <\/div><\/a><\/p>\n

Where as – Zoom 100%<\/p>\n

 <\/p>\n

\"zoom-100\"<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2507\"\r\n <\/div><\/a><\/p>\n

 <\/p>\n

Here the code for responsive, lets check it,<\/p>\n

 <\/p>\n

\"css2\"<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2508\"\r\n <\/div><\/a><\/p>\n

 <\/p>\n

and screen shot – zoom 150%<\/p>\n

\"zoom-150\"<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2509\"\r\n <\/div><\/a><\/p>\n

Here the video wrapper to 600px which is fixed for 800px initially,<\/p>\n

 <\/p>\n

\"css3\"<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2510\"\r\n <\/div><\/a><\/p>\n

In browser – Zoom 400%<\/p>\n

\"zoom-400\"<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-2511\"\r\n <\/div><\/a><\/p>\n

Finally both the fixed videos are at the same width(600px).<\/p>\n","protected":false},"excerpt":{"rendered":"

The HTML draft specification introduced the video element for the purpose of playing videos or movies,partially replacing the object element. HTML video is intended by its creators to become the new standard way to show video on the web without plugins.   Source Code   CSS Here I consider the total width as 700px;   […]<\/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-2503","post","type-post","status-publish","format-standard","hentry","category-whats-trending-web-design"],"_links":{"self":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/2503","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/comments?post=2503"}],"version-history":[{"count":6,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/2503\/revisions"}],"predecessor-version":[{"id":2517,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/2503\/revisions\/2517"}],"wp:attachment":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/media?parent=2503"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/categories?post=2503"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/tags?post=2503"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}