Tùy chỉnh Youtube Embed Player

Hướng dẫn này sẽ giúp bạn làm thế nào để tùy chỉnh mã nhúng Youtube bằng cách sử dụng các thông số tùy chỉnh của Youtube. Ngày nay hầu hết các quản trị web thường sử dụng thẻ <iframe> để hiển thị video YouTube, điều này nhằm giúp cải thiện kinh nghiệm phát triển web của bạn. Bạn có thể ngừng hiển thị video có liên quan bằng cách sử dụng tham số rel  hoặc loại bỏ các biểu tượng YouTube trên trình phát nhạc bằng cách sử dụng tham số modestbranding, hy vọng điều này sẽ làm phong phú thêm kinh nghiệm cho dự án web của bạn.

Xem thêm: Responsive YouTube Embed

Tạo một Youtube Playlist không cần kết nối vào tài khoản

Làm thế nào để bạn chia sẽ bộ sưu tập danh sách phát video YouTube qua email hoặc trên các trang mạng xã hội. Lựa chọn tốt nhất của bạn là tạo một danh sách video YouTube mới, thêm tất cả các video bạn cần và sau đó chia sẽ liên kết (URL) của danh sách đó. Đều này rất dễ dàng thực hiện khi bạn kết nối bằng tài khoản google với kênh YouTube của bạn và bạn không thể nào tạo được danh sách phát mà không đăng nhập vào tài khoản của bạn, dưới đây là một mẹo giúp bạn tạo một danh sách phát video YouTube mà không cần đăng nhập vào tài khoản của mình.

Responsive YouTube Embed

YouTube cho phép người dùng nhúng video vào trong trang web hay blog của chính họ. Tuy nhiên youtube không hỗ trợ chức năng responsive video khi ta sử dụng mã nhúng (Embed Code). Tức là những video đó sẽ không tự động thu nhỏ lại mỗi khi kích thước màn hình trình duyệt thay đổi. Và điều này thật sự sẽ gây khó khăn cho người dùng những thiết bị di động vốn dĩ có kích thước hiển thị nhỏ hơn rất nhiều so với máy tính để bàn hay laptop. Hôm nay, mình xin chia sẽ đến các bạn thủ thuật responsive youtube embed sử dụng css cho chúng ta nhúng nó vào web hay blog.

- Để được responsive khi chèn mã nhúng youtube vào blog chỉ cần copy mã CSS dưới đây vào template

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

- Sử dụng bằng cách thêm thẻ <div class="video-container">...</div> bao quanh mã nhúng, ví dụ:

<div class="video-container">
   <iframe src="http://www.youtube.com/embed/dFVxGRekRSg" frameborder="0" width="560" height="315"></iframe>
</div>

Xem thêm: Responsive Plugin Comment Facebook

Responsive YouTube Demo

Nguồn: Internet

Tự động chuyển đổi URL YouTube thành Embed Code sử dụng JQuery

Làm thế nào để tự động chuyển đổi URL YouTube sang mã nhúng (i frame embed code). Và đây là một ví dụ cơ bản sử dụng jQuery

Xem thêm: Hướng dẫn chèn Video Youtube vào khung Comment của Blogspot

jQuery:

$('#comment-holder').html(function(i, html) {
    var re  = /(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g,
        vid = '<iframe width="420" height="345" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>';
    return html.replace(re, vid);
});

Xem Demo

Sử dụng được với 2 dạng URL YouTube như:
       http://youtu.be/EfdiHPeT2Sg
       http://www.youtube.com/watch?v=EfdiHPeT2Sg

Tham khảo: How to Convert a YouTube Video URL to the Iframe Embed Code, using JQuery

Chèn video YouTube vào khung comment của Blogger

Vì một lý do nào đó bạn cần chèn video của youtube vào khung comment của blogger, ví dụ như giải thích một cái gì đó  liên quan đến bài viết bằng video thông qua khung bình luận của blogger, nhưng thực tế khung comment mặt định của blogger không cung cấp cho ta tính năng này, Vậy làm thế nào để thực hiện điều đó? Hôm nay, xin chia sẽ cho bạn một cách để chèn video vào khung bình luận của blogger bằng các sử dụng javascript. Tùy vào nội dung trên blog của bạn, bạn có thể sử dụng nó với mục đích khác nhau. Vì vậy, nếu bạn thấy rằng việc sử dụng video trên khung bình luận của bạn là thực sự hữu ích và bạn muốn có tính năng này trên blog của mình, bạn chỉ cần làm theo các bước đơn giản dưới đây.

Xem thêm: Chuyển đổi URL YouTube sang Embed Code sử dụng jQuyery

Chèn video của youtube vào khung comment của Blogger

Để cài đặt, trước tiên đăng nhập vào Blogger

Vào Mẫu (Template) >> Chỉnh sửa HTML (Edit HTML)

Tiếp theo, tìm thẻ đóng </body>, sao chép (copy) và dán (paste) đoạn mã dưới đây ngay trên thẻ đóng </body>

<script src="https://googledrive.com/host/0BwL0KbT-xOaTTHdfZlhjNEdhQUk/video-comments-youtube.js"></script>

Cuối cùng, Lưu mẫu của bạn lại và sử dụng

Cách sử dụng:
Mỗi khi bạn muốn nhúng  video của youtube vào khung bình luận của blogspot chỉ cần thêm mã dưới đây vào khung bình luận và thay địa-chỉ-video-của-youtube thành url của youtube

[youtube=địa-chỉ-video-của-youtube]

Ví dụ:

[youtube=https://www.youtube.com/watch?v=bVBJdMJVEa4]

Vậy là xong, bạn có thể kiểm tra tại khung comment cuối bài viết này :D

Ưu điểm của cách chèn này là bạn có thể chèn tất cả các định dạng url của youtube như:[youtube=https://www.youtube.com/watch?v=ovoKA5ta5IM] [youtube=http://www.youtube.com/embed/LEqxLHj0NlI]
[youtube=http://www.youtube.com/watch?v=6ULD5eroPoE&feature=related] [youtube=https://www.youtube.com/watch?v=OJZkETR08v4&list=PLUF4ja1L1-bjz5vXOrL1aeE3wsvapPrD9]
...

Hy vọng với mẹo nhỏ này bạn đả có thể chèn video vào khung nhận xét của blogger, và sử dụng nó đúng với mục đích của bạn. Chúc thành công!

Thêm YouTube Subscribe Button (nút đăng ký kênh YouTube) vào blog

Việc thêm Subscriber Youtube Button (nút đăng ký theo dõi kênh YouTube) vào blog nhằm giúp người xem dễ dàng đăng ký theo dõi kênh YouTube của bạn. Vậy làm thế nào để thêm nút Subscriber YouTube vào blog của bạn? Nếu bạn đang phát triển kênh YouTube của bạn, bạn có thể sử dụng widget dưới đây

Xem Demo

Thêm nút đăng ký kênh YouTube vào Blog

Với Blogspot chỉ cần vào Bố cục >> Thêm tiện ích >> HTML/Javascript Sao chép và dán đoạn mã sau vào và Lưu lại

<iframe src=http://www.youtube.com/subscribe_widget?p=YouTube-Username style="overflow: hidden; background:#fff; height: 80px; width: 260px; border: 0;" scrolling="no" frameborder="0"></iframe>

Thay YouTube-Username thành username của bạn là xong :v

Bạn có thể vào https://developers.google.com/youtube/youtube_subscribe_button#Configure_a_Button để tạo YouTube Subscriber Button.