Thêm hình nền cho video youtube cho Blogger

Hôm nay mình sẽ hướng dẫn một cách thêm hình nền cho video từ youtube một cách mới ngắn gọn hơn, cụ thể là bạn chỉ việc dán CSS và JS vào template một lần duy nhất.
Demo:

CSS

Các bạn thêm đoạn CSS sau đây vào template:

Code:

.youtube-tvl {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb9Ofc204K9fBMtkFDHU2MBr62aymzMSB7Za3Vkwp2uBvJKQAGlvmRl084JmCROi5Tz7PGZs63hFnp_FRIZRftYGs-X6e6rSLh1mFIZF78Gp9wd26hcKPfNypeKXQN7bOabNNjytA4Q4k7/s1600/troll-frame.png') no-repeat scroll left top transparent; height: 364px; margin: 0px auto; padding: 19px 0px 0px 22px; text-align: left; width: 532px}

Bạn có thể thay link hình ảnh màu đỏ bằng 1 trong số link dưới đây:

• 
  

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb9Ofc204K9fBMtkFDHU2MBr62aymzMSB7Za3Vkwp2uBvJKQAGlvmRl084JmCROi5Tz7PGZs63hFnp_FRIZRftYGs-X6e6rSLh1mFIZF78Gp9wd26hcKPfNypeKXQN7bOabNNjytA4Q4k7/s1600/troll-frame.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikCg_wl7v5gqrTao8-DmJajWLOZsBDMqb1kxy9bjCOMRZy0AIWSGPDW2dW_c36ytiVLXPmWBXcEYxjBiZgZi08xDobRyvEyrW6fCCd2xZUTMWU5qYRcXF9gQIHchqt_TiBCc-3c47RwtHr/s1600/frametvl1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvX-BtIDwESFQGhjm5yRe5rkhWuDodsoAAO-oHOWoxVERxt_xGmPjoX22KMIXPSeIs82wfAjUNjxVJ0pWIaf8edWsqCXhZtnTI-dA_mafR0dLqX97AigomR9zslX7EjoeMZulA7_0N9hsf/s1600/frametvl3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihZr135cG0JVHmutkR2FU7SJ9D0-iHW6T_ArsDzjUBcOYNfk04YZF9wIE-P53v1u5sJfOArpRIyRKN89aznCkRLNX8adoTNK89aM7gmaY5DMy8C9VPpdVOXyoe0GNy_UHpueT0uwOGvJXO/s1600/frametvl2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLGyj5mYkeGgPmoLC1z1abbJK1D8qLvdO5px7ICUN_TJLWugDBSgj0eUtawI9YbOfJrAufVUbpYkPA8GV8lhplOXNnvwn8sBL3lddWmTG5cOkCTpvae1EEu3M3qi6BI-R5GtCLIxKe0uoi/s1600/frametvl4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaY2q-frkkI8duTYz0CN1sj8yMyhapqj7ngoiBoSm-nQgXnxVzJbVIDpoWIO7LCo9R5djXSFPjuwQ018TKo5Ui-XWVSBGEovTp1cNBXpUIA3Lp277DCLcnWagCLZndbIDKZZzBeLnSoS56/s1600/tvl-frame.png

Chèn đoạn JS bên dưới vào trước thẻ đóng </body> sau đó lưu lạiCode:

<script type='text/javascript'>
//<![CDATA[
var _0xaa5c=["\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x79\x6F\x75\x74\x75\x62\x65\x2D\x74\x76\x6C\x22\x3E\x3C\x69\x66\x72\x61\x6D\x65\x20\x77\x69\x64\x74\x68\x3D\x22\x35\x30\x30\x22\x20\x68\x65\x69\x67\x68\x74\x3D\x22\x33\x30\x30\x22\x20\x73\x72\x63\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x79\x6F\x75\x74\x75\x62\x65\x2E\x63\x6F\x6D\x2F\x65\x6D\x62\x65\x64\x2F\x24\x31\x22\x20\x66\x72\x61\x6D\x65\x62\x6F\x72\x64\x65\x72\x3D\x22\x30\x22\x20\x61\x6C\x6C\x6F\x77\x66\x75\x6C\x6C\x73\x63\x72\x65\x65\x6E\x3E\x3C\x2F\x69\x66\x72\x61\x6D\x65\x3E\x3C\x2F\x64\x69\x76\x3E","\x72\x65\x70\x6C\x61\x63\x65","\x68\x74\x6D\x6C","\x62\x6F\x64\x79"];var _0x7554=[_0xaa5c[0],_0xaa5c[1],_0xaa5c[2],_0xaa5c[3]];var _0x677d=[_0x7554[0],_0x7554[1],_0x7554[2],_0x7554[3]];$(_0x677d[3])[_0x677d[2]](function (_0xd813x3,_0xd813x4){return _0xd813x4[_0x677d[1]](/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g,_0x677d[0]);} );
//]]>
</script>

Thực hiện khi viết bài


Từ giờ các bạn chỉ việc dán link youtube vào khung soạn thảo bài viết hệ thống khác tự động đổi từ link sang mã nhúng kèm hình nền.