{"id":3547,"date":"2014-05-15T00:51:30","date_gmt":"2014-05-15T00:51:30","guid":{"rendered":"http:\/\/tapchicntt.com\/?p=3547"},"modified":"2014-05-15T00:52:58","modified_gmt":"2014-05-15T00:52:58","slug":"cach-lay-video-lam-background-voi-html5-css","status":"publish","type":"post","link":"https:\/\/tapchicntt.com\/cach-lay-video-lam-background-voi-html5-css\/","title":{"rendered":"C\u00e1ch l\u1ea5y Video l\u00e0m Background v\u1edbi HTML5 & CSS"},"content":{"rendered":"

Th\u00f4ng th\u01b0\u1eddng, \u0111\u1ec3 t\u1ea1o n\u1ec1n cho web, ch\u00fang ta th\u01b0\u1eddng d\u00f9ng h\u00ecnh \u1ea3nh ho\u1eb7c m\u00e0u s\u1eafc. Nh\u01b0ng c\u00f3 r\u1ea5t \u00edt ng\u01b0\u1eddi bi\u1ebft r\u1eb1ng, ch\u00fang ta c\u0169ng ho\u00e0n to\u00e0n c\u00f3 th\u1ec3 l\u1ea5y video l\u00e0m n\u1ec1n cho web. Ch\u1ec9 v\u1edbi m\u1ed9t \u0111o\u1ea1n css c\u01a1 b\u1ea3n c\u00f9ng v\u1edbi s\u1ef1 h\u1ed7 tr\u1ee3 c\u1ee7a HTML5 l\u00e0 ch\u00fang ta c\u00f3 th\u1ec3 l\u00e0m \u0111\u01b0\u1ee3c \u0111i\u1ec1u n\u00e0y.
\n<\/p>\n

HTML<\/h2>\n

Tr\u01b0\u1edbc ti\u00ean ch\u00fang ta c\u1ea7n l\u1ea5y video \u0111\u1ec3 l\u00e0m background nh\u01b0 sau:<\/p>\n

\r\n\r\n    <video id="video_background" preload="auto" autoplay="true" loop="loop" muted volume="0">\r\n            <source src="videos\/tunnel_animation.webm" type="video\/webm"\/>\r\n            <source src="videos\/tunnel_animation.ogv" type="video\/ogg ogv"; codecs="theora, vorbis"\/>\r\n            <source src="videos\/tunnel_animation.mp4" type="video\/mp4"\/>\r\n    <\/video>\r\n\r\n<\/pre>\n
C\u00e1c b\u1ea1n th\u1ea5y trong \u0111o\u1ea1n html b\u00ean tr\u00ean, video c\u1ee7a ch\u00fang ta \u0111\u01b0\u1ee3c l\u01b0u d\u01b0\u1edbi nhi\u1ec1u \u0111\u1ecbnh d\u1ea1ng kh\u00e1c nhau, vi\u1ec7c n\u00e0y s\u1ebd gi\u00fap ch\u00fang ta hi\u1ec3n th\u1ecb \u0111\u01b0\u1ee3c video tr\u00ean nhi\u1ec1u tr\u00ecnh duy\u1ec7t kh\u00e1c nhau.<\/p>\n
CSS<\/h2>\n
V\u00e0 \u0111\u1ec3 video c\u00f3 th\u1ec3 l\u00e0m background cho to\u00e0n b\u1ed9 web, th\u00ec c\u00e1c b\u1ea1n c\u1ea7n copy \u0111o\u1ea1n css sau:<\/p>\n
\r\n\r\n#video_background {\r\nposition: absolute;\r\nbottom: 0px;\r\nright: 0px;\r\nmin-width: 100%;\r\nmin-height: 100%;\r\nwidth: auto;\r\nheight: auto;\r\nz-index: -1000;\r\noverflow: hidden;\r\n}\r\n\r\n<\/pre>\n
Trong \u0111o\u1ea1n css b\u00ean tr\u00ean, position: absolute s\u1ebd cho ph\u00e9p ch\u00fang ta neo gi\u1eef video t\u1eeb v\u1ecb tr\u00ed bottom \u2013 right<\/strong> c\u1ee7a tr\u00ecnh duy\u1ec7t. C\u00e1c b\u1ea1n c\u0169ng c\u00f3 th\u1ec3 thay \u0111\u1ed5i v\u1ecb tr\u00ed top -left<\/strong> n\u1ebfu mu\u1ed1n. V\u1edbi vi\u1ec7c khai b\u00e1o width: auto; height: auto;<\/strong> v\u00e0 min-width: 100%; min-height: 100%<\/strong> th\u00ec video c\u1ee7a ch\u00fang ta s\u1ebd lu\u00f4n lu\u00f4n c\u00f3 k\u00edch th\u01b0\u1edbc v\u1eeba v\u1eb7n c\u1ea3 v\u1ec1 chi\u1ec1u ngang l\u1eabn chi\u1ec1u d\u1ecdc. Quan tr\u1ecdng nh\u1ea5t l\u00e0 ch\u00fang ta ph\u1ea3i \u0111\u1eb7t thu\u1ed9c t\u00ednh z-index: -1000px;<\/strong> \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o video c\u1ee7a ch\u00fang ta lu\u00f4n lu\u00f4n \u0111\u1ee9ng sau t\u1ea5t c\u1ea3 m\u1ecdi ph\u1ea7n t\u1eed.<\/p>\n
Th\u1ebf l\u00e0 xong, v\u00e0 b\u00e2y gi\u1edd c\u00e1c b\u1ea1n \u0111\u00e3 c\u00f3 th\u1ec3 bi\u1ebft \u0111\u01b0\u1ee3c c\u00e1ch l\u1ea5y video l\u00e0m background r\u1ed3i ph\u1ea3i kh\u00f4ng? M\u00ecnh mong l\u00e0 v\u1edbi b\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap \u00edch \u0111\u01b0\u1ee3c nhi\u1ec1u cho c\u00e1c b\u1ea1n trong c\u00e1c d\u1ef1 \u00e1n web c\u1ee7a m\u00ecnh.<\/p>\n
Ch\u00fac c\u00e1c b\u1ea1n th\u00e0nh c\u00f4ng<\/p>\n
Ngu\u1ed3n: http:\/\/syddev.com\/jquery.videoBG\/index.html<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Th\u00f4ng th\u01b0\u1eddng, \u0111\u1ec3 t\u1ea1o n\u1ec1n cho web, ch\u00fang ta th\u01b0\u1eddng d\u00f9ng h\u00ecnh \u1ea3nh ho\u1eb7c m\u00e0u s\u1eafc. Nh\u01b0ng c\u00f3 r\u1ea5t \u00edt ng\u01b0\u1eddi bi\u1ebft r\u1eb1ng, ch\u00fang ta c\u0169ng ho\u00e0n to\u00e0n  c\u00f3 th\u1ec3 l\u1ea5y video l\u00e0m n\u1ec1n cho web. Ch\u1ec9 v\u1edbi m\u1ed9t \u0111o\u1ea1n css c\u01a1 b\u1ea3n c\u00f9ng v\u1edbi s\u1ef1 h\u1ed7 tr\u1ee3 c\u1ee7a HTML5 l\u00e0 ch\u00fang ta c\u00f3 th\u1ec3 l\u00e0m \u0111\u01b0\u1ee3c \u0111i\u1ec1u n\u00e0y.<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[145],"tags":[],"class_list":["post-3547","post","type-post","status-publish","format-standard","hentry","category-html-css"],"views":501,"_links":{"self":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/3547","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/comments?post=3547"}],"version-history":[{"count":0,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/3547\/revisions"}],"wp:attachment":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/media?parent=3547"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/categories?post=3547"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/tags?post=3547"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}