Thêm hình nền cho video youtube cho Blogger
04:21
-
Thứ Tư, 13 tháng 7, 2016
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:
Bạn có thể thay link hình ảnh màu đỏ bằng 1 trong số link dưới đây:
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.
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/AVvXsEhiHjkq5qjW0uMeNxRRUrtyCqNZCZM5NvwDSj1e5E9acp7f-2PLEkCKE8QYVRQfxZip6DIXfN5BEfxqjGuTjFxU_F1PQnOpli0MMZckcckR1zGo4rOnJqgkucDej2w_OCZOvh37lnQ6mt3d/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}
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.
Liên quan
- Không có bài nào !
Nhận xét