Thêm hình nền cho video youtube ver 2

Trước đây mình có giới thiệu đến độc giả của TrollVL một cách thêm hình nền cho video từ youtube tại bài viết này. Tuy nhiên cách này khác là phức tạp và dài dòng, vì thế hôm nay mình sẽ hướng dẫn các bạn 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

CSS

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

.youtube-tvl {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2MQVTEox7dqaVFaTcUe7RjTwHbaEw_bigEPN90QUO5lIsU2AXPFr0fW2pqhXzd_1wE5YIgIaXn493XPLN_-wdCYI71DX-mFIZVnGhEQ04e1srFsEqquUnKQuDFCs0XY_-nWlkkygU81uh/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/AVvXsEi2MQVTEox7dqaVFaTcUe7RjTwHbaEw_bigEPN90QUO5lIsU2AXPFr0fW2pqhXzd_1wE5YIgIaXn493XPLN_-wdCYI71DX-mFIZVnGhEQ04e1srFsEqquUnKQuDFCs0XY_-nWlkkygU81uh/s1600/troll-frame.png
• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLMPbd0n0lxqqXPgQ-oDD9c7RHjICutuezFu9s4oJx-Tyf2K9wXSPyBQ0XGjT52Dj7K2d731-AXgEXUHROZsnGZL2DAVsBsIfsw2dNpq5wpR7ulC5HG4zTWW2mAIeNHGrdhBJfAHD8dSpl/s1600/frametvl1.png
• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhioMiOzkmXQlbdvYnpbmj-Pppjs0B86qi7lU6axNiEPDDkjYQkC5JgJRTKi1NI4xazJTx4f7DJa6mfKEOCxGsLqXYBAWLD4sj9xAQa8E8gEGLoOJ8KLW80yGdcP0OSINwShds9ea8CCotd/s1600/frametvl3.png
• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNNWvTdL7Rx9KBlB47NMn-nvJNAJWZsLzauwyye_alDqM_u-jSSn7-QUFfF5LEVc2EkB8Voixp-K56PuDHRROTMx225vTYs_RHTQS4Z0R1KOoj8nH23x2eGnVFDO1iiGI_v1jIV5RXNcqa/s1600/frametvl2.png
• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiwYEfaJqSf9bf3QmTYNonP4jrpXmtUGWWsJaeNMjskd6z8W6zAjzKf6Rvhkxg-BZIWbvTSTpQb5Gm139udo2LquusDx87pP0J8YvvxIAWpGz54Rys3GIQ67HZuus6fs-XLiKNLWmsMPXV/s1600/frametvl4.png
• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9isuDdEtG1O650sQOZlfZMYqVKcfq9XVLewADgAUTl0WEN0NnSYjvD67TgDwCX_zSfJn1fypc-9fCX01O5DodsMsmcyGzKmvBVhFN4R33g0L25tAirxG3KX80jL_j6OvhoUkipOI-exXe/s1600/tvl-frame.png

Javascript

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

<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. Ví dụ:

http://youtu.be/b8j429UdkzQ
http://www.youtube.com/watch?v=b8j429UdkzQ

Lưu ý: Template bạn phải có jQuery thì thủ thuật này mới hoạt động nhé!