Tự động chèn video Youtube chỉ bằng ID vào bài viết

Trước đây mình đã từng giới thiệu cách chèn tự động video trên Youtube vào blogspot. Cách này áp dụng cho code embed kiểu cũ. Mà code embed kiểu cũ của Youtube thường có dạng như thế này:

<object width="420" height="315"><param name="movie" value="http://www.youtube.com/v/2WnaQgQwGa4?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/2WnaQgQwGa4?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>

Trong đoạn code trên thì 2WnaQgQwGa4 chính là ID của video. Hiện nay Youtube đã áp dụng code chèn kiểu mới, có dạng như sau:

<iframe width="420" height="315" src="http://www.youtube.com/embed/2WnaQgQwGa4" frameborder="0" allowfullscreen></iframe>

Đối với các blogspot chuyên đăng video clip lấy từ Youtube thì công việc chèn video cần được tự động hóa, giúp người quản trị đỡ phần mệt nhọc. Ngoài cách chèn tự động trước đây mình đã giới thiệu, hôm nay mình giới thiệu tiếp một cách khác. Trước tiên bạn cần đặt một đoạn script tạo chức năng chèn video tự động trước thẻ </head> trong Template.

<script type='text/javascript'>
//<![CDATA[
// Script to insert Youtube video automatically on Blogspot by www.thuthuatblogger.info
function insert_YouTube(IDyoutube) {
var width = 430; // có thể chỉnh chiều rộng khung video
var height = 315; // có thể chỉnh chiều cao khung video
var output = "<div style=\"text-align:center;\">";
output = '<iframe width="'+width+'" height="'+height+'" src="http://www.youtube.com/embed/'+IDyoutube+'?rel=0" frameborder="0" allowfullscreen>'; // rel=0 giúp vô hiệu hóa chức năng video liên quan
output += "</iframe>";
output += "</div>";
document.write (output);
}
//]]>
</script>

Đến đây, mỗi khi đăng bài viết, ở chế độ Edit HTML trong công cụ đăng bài, bạn chỉ việc đặt code như sau:

<script>insert_YouTube("XXXXXXXXXXX");</script>

Trong đó XXXXXXXXXXX chính là ID của video trên Youtube.
Ưu điểm của cách này so với cách cũ là khi đang play video, click vào màn hình video thì sẽ không xuất hiện tab dẫn đến trang video Youtube (trong khi cách cũ vẫn bị tình trạng này).

More about →

Chèn video Youtube tự động vào Blogger

Khi bạn muốn chèn một video trên Youtube vào blogspot của bạn thì trước tiên bạn lấy code embed trên Youtube. Lấy ví dụ sau đây là đoạn code cho một cảnh đấu võ trong bộ phim Diệp Vấn do Chung Tử Đơn thủ vai chính.

<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/QQjztBXAnjk?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/QQjztBXAnjk?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>

Để đưa video trên vào blogspot thì bạn chỉ việc dán đoạn code đó vào bài viết ở chế độ Edit HTML. Tuy nhiên, đối với một blogspot chuyên giới thiệu về những bộ phim hay chứa nhiều video chẳng hạn, thì bạn sẽ phải đưa vào bài viết rất nhiều đoạn mã.

Có một cách đơn giản hóa việc chèn video vào blogspot. Trước tiên sử dụng Javascript để tạo chức năng chèn video Youtube tự động. Bạn hãy đặt đoạn code dưới đây vào trước thẻ </head> trong Template.

<script type='text/javascript'>
//<![CDATA[
function insert_YouTube(IDyoutube) {
var output = "<div style=\"text-align:center;\">";
output += "<object width=\"425\" height=\"350\" id=\"movie\" type=\"application/x-shockwave-flash\" data=\"http://www.youtube.com/v/" + IDyoutube + "&hl=es&fs=1&rel=0&autoplay=0&ap=%2526fmt%3D18&showsearch=0&showinfo=0\">";
output += "<param name=\"movie\" value=\"http://www.youtube.com/v/" + IDyoutube + "&hl=es&fs=1&rel=0&autoplay=0&ap=%2526fmt%3D18&showsearch=0&showinfo=0\" />";
output += "<param name=\"wmode\" value=\"transparent\" />";
output += "<param name=\"allowfullscreen\" value=\"true\" />";
output += "</object>";
output += "</div>";
document.write (output);
}
//]]>
</script>

Tiếp theo là tạo Javascript gọi chức năng chèn video Youtube để đặt trong bài viết.

<script>insert_YouTube("XXXXXXXXXXX");</script>

Trong đó XXXXXXXXXXX là ID của video.

Lấy ví dụ trong đoạn code cho màn đấu võ ở trên thì ID là QQjztBXAnjk. Như vậy để chèn video này vào blogspot thì đặt đoạn code như thế này.

<script>insert_YouTube("QQjztBXAnjk");</script>

Bằng cách này mỗi khi chèn một video trên Youtube vào bài viết thì bạn chỉ cần lấy ID của video đó và đặt vào đoạn code Javascript như trên là OK.

More about →