27 tháng 4, 2019

SEO YouTube với videos Nhúng - Embed YouTube video

how to embed youtube video

Để quảng bá video YouTube của mình, không gì hay hơn nhúng video YouTube vào các trang web, đăng lên các trang mạng xã hội, các kênh chat, các diễn đàn. Trong khi nhúng (embed) video YouTube lên những tài nguyên mạng thì thường bạn sẽ được cung cấp công cụ hỗ trợ, như chức năng nhúng video của các forum, copy link dán vào Facebook là đã nhúng xong,... thì nhúng video YouTube vào website/blog của bạn sẽ cần một chút thủ thuật để chúng hiệu quả hơn, SEO tốt hơn.




Nhúng video YouTube vào website/blog cũng là một cách tăng điểm rank cho video của bạn. Luôn nhớ rằng khi nhúng kiểu này, bạn embed cho video đó và thêm một link trỏ về channel chứa video đó nữa, để tối ưu SEO (với anchor text của channel chính là keyword của channel), ví dụ như Chế Bình Dân.

Không chỉ đơn giản nhúng video YouTube, đôi khi bạn cũng cần nhúng Playlist YouTube, nhúng video để autoplay khi người đọc mở trang web nhưng tắt audio, nhúng video YouTube nhưng xóa logo nhàm chán đi,...


Thôn tin bài viết:


Nhúng YouTube videos đúng cách, là bạn đang SEO YouTube chuẩn đó, nhất là khi nhúng YouTube Playlist. Tôi sẽ bàn về SEO YouTube playlist riêng trong một bài chi tiết khác. Trong bài này chúng ta sẽ xem các loại nhúng video vào website/blog cũng như tác động của nó tới cả việc xếp hạng cho website lẫn YouTube videos.

Mục lục:

Hướng dẫn nhúng YouTube videos



Mở video bạn muốn nhúng (của bạn). Click vào chữ Share

Embed YouTube videos - SEO YouTube with embed videos


Click chuột vào chữ Embed, copy toàn bộ code iframe...


seo-youtube


... và dán vào website/blog của bạn (chế độ soạn thảo HTML)...


seo-youtube


Lưu trang web lại và bạn đã thấy có một khung video YouTube trong trang web của mình rồi. Giờ hãy tìm hiểu thêm các chức năng khác khi nhúng video nào. Click vào nút Show More

Cửa sổ Embed của YouTube sẽ được nới rộng xuống với các Options thêm như sau:


seo-youtube


Bạn có thể chọn:
  • Hiển thị video đề xuất sau khi kết thúc video trên
  • Hiển thị các nút điều khiển video
  • Hiển thị Tiêu đề video và hành động của người xem
  • Bật chức năng riêng tư chế độ cao: YouTube sẽ không lưu các thông số người dùng truy cập website trừ khi họ click vào nút Play video.
Bạn cũng có thể chỉnh lại độ cao, rộng của video khi nhúng bằng ô Video size.

Sau khi chọn lựa các Options này, quay lại và copy đoạn code iframe rồi chèn vào website/blog như bước trên là bạn sẽ có một video YouTube được nhúng theo đúng cách bạn muốn rồi đó.


Nhúng YouTube videos cho Flash lẫn HTML5

YouTube mặc định hỗ trợ Flash video player để nhúng video vào web/blog. Với hiện trang bây giờ khi mà hầu hết trình duyệt đều có các plugin Adobe Flash kèm theo thì việc trình chiếu một video của YouTube trở nên rất đơn giản, nhẹ nhàng.

Vấn đề chỉ phát sinh khi hiện nay, mảng trình duyệt cho mobile bắt đầu bùng phát, và Adobe Flash còn quá nặng nề để cài đặt và vận hành, đặc biệt độ ngốn dung lương bộ nhớ nên Flash không thích hợp cho thiết bị di động cầm tay. May thay HTML5 ra đời, nhẹ nhàng hơn, dễ thương hơn, và cũng dễ... dãi hơn khi bạn chỉ cần dùng các tag thông dụng để nhúng video nói chung, tag <video>. Hãy so sánh code cần để nhúng video vào website, và bạn sẽ thấy cái nào đang chiếm ưu thế:


seo-youtube


Nhúng YouTube video vào trong iFRAME

Nếu người dùng lướt website của bạn với cả mobile và desktop, giải pháp cho bạn là sẽ phải nhúng 1 video 2 code, một cho Flash và 1 cho HTML5. Khi đó người dùng mobile sẽ thấy video trên điện thoại còn người dùng máy tính để bàn sẽ chỉ xem được vidoe video hỗ trợ Flash.

May thay, một công nghệ mới có tên IFRAME ra đời đã giải quyết được tốt vấn đề trình chiếu video, trên bất cứ nền tảng trình duyệt nào, hỗ trợ cả Flash lẫn HTML5.


seo-youtube


IFRAME sẽ tự dò xét xem trình duyệt/Hệ điều hành đang truy vấn của người dùng là loại gì và sẽ sử dụng trình player hỗ trợ tương ứng để chiếu video. Mặt khác, đoạn code IFRAME lại cực kỳ đơn giản, gọn nhẹ. Tuyệt vời!

<iframe src="http://www.youtube.com/embed/VIDEO_ID"
   width="320" height="190"></iframe>


Hiện nay thì quá trình thử nghiệm IFRAME của YouTube đã xong, kết thúc với thành công tốt đẹp và YouTube chính thức sử dụng IFRAME như nền tảng nhúng video chuẩn của mình.


Nhúng video YouTube tự chạy khi mở trang web


Bạn đã biết cách nhúng video YouTube vào website của mình rồi. Bạn cũng muốn khi có người mở trang web thì nó sẽ tự chạy, và điều đó giúp bạn có được thêm views, cũng như video thêm active hơn.

Hiện nay tôi không rõ để video tự chạy có ảnh hưởng tiêu cực gì không, nhưng rất nhiều chuyên gia khuyên nên để video tự chạy, vì bản thân nó sẽ được điểm tăng rank, thêm video, và nếu đó là YouTube Playlist thì bạn có thể được thêm điểm đề xuất video khi người dùng đọc nội dung lâu và video chạy được sang tới clip thứ 2.

Các bài hướng dẫn chèn code autoplay cho YouTube hiện nay đã cũ và không hoạt động được nữa. Ngay cả bài hướng dẫn chính thức của YouTube cũng không áp dụng được.

Bản thân tôi sau vài thử nghiệm đã rút tỉa được kinh nghiệm. Giả sử đây là code để nhúng video:

<iframe width="420" height="315" src="https://www.youtube.com/embed/83daYpwGRrU" frameborder="0" allowfullscreen></iframe>


Thì đây sẽ là code nhúng video tự chạy

<iframe width="420" height="315" src="https://www.youtube.com/embed/83daYpwGRrU?autoplay=1" frameborder="0" allowfullscreen></iframe>

Tức là bạn sẽ thêm vào đoạn ?autoplay=1 ở ngay sau địa chỉ của video (vẫn trong ngoặc "). Các hàm thường dùng:

  • autoplay: tự động chạy video khi mở trang web (mặc định Không, tức =0)
  • controls: Các nút điều khiển video (mặc định là Có, tức =1)
  • rel: hiển thị videos gợi ý sau khi chạy hết video (mặc định Có)
Để cài đặt tính năng khác mặc định, bạn cần chèn Tham số đó, gắn sau dấu (?) và đặt giá trị 0 (No) hoặc 1 (Yes) ngay sau ID của video.



Nhúng video YouTube và tắt Tiếng

Để nhúng video YouTube vào website hoặc Blog, bạn đã biết cách thực hiện và rõ ràng nó khá là đơn giản phải không? Bạn chỉ cần lấy đoạn code IFrame mặc định, dán vào nơi muốn hiện video là xong.

YouTube cũng cung cấp các thông số căn bản để tùy biến cho khung video nhúng này, bạn có thể thay đổi kích thước khung video, cài đặt hiển thị hoặc ẩn các nút điều khiển, tiêu đề video,... Nhưng nếu bạn muốn tác động sâu hơn vào hành vi của video khi chúng được nhúng vào nhà của bạn, vào website của bạn, thì bạn sẽ cần đến YouTube Player API.

Trong phần hướng dẫn này tôi sẽ chỉ bạn cách nhúng một video YouTube vào website của bạn, cài đặt để nó tự chạy (AutoPlay - nhưng không phải bằng cách Nhúng video YouTube tự chạy khi mở trang web nhé, mà sẽ lập trình trong template của website. Bạn sẽ chỉ việc nhúng video bình thường, còn việc chạy thế nào thì do template quyết định) mà không bật tiếng, tức âm thanh sẽ được tắt.

Việc tắt tiếng cho các video tự chạy khiến trải nghiệm người dùng (User experiment) sẽ được tốt hơn. Bạn có bao giờ giật mình khi vô tình mở một trang web và nghe no gào thét âm thanh khó chịu nào chưa? Việc tắt tiếng giúp người đọc của bạn sẽ không phải trải nghiệm những điều tương tự. Nếu muốn xem video họ sẽ bật volume lên. Hơn nữa, việc video không phát ra tiếng động khiến người dùng cũng không quan tâm tới việc đóng chúng, ngừng chúng lại, và nó cho bạn có được lượng view chất lượng, thêm điểm tăng hạng cho video, thêm cả đề xuất video nếu bạn nhứng YouTube playlistautoplay.

Lấy ví dụ, một website bán hàng sẽ có một video hướng dẫn sử dụng ngay ở trang đầu. Video đó sẽ được tự động chạy ngay khi bạn truy cập website. Volume video sẽ được cài về 0 để không gây hiệu ứng ức chế người dùng, và họ có thể mở tiếng khi muốn xem.
Tương tự như khi bạn dùng một video làm nền cho website/web page (bakground - tương tự như màu nền, hình nền, nhưng đây là dùng một video, tức tập hợp ảnh động )

Để thực hiện điều này, hãy ghi lại video ID của bạn (trích ra từ URL của video)

export youtube id from url



Sau khi có ID, thay nó vào chỗ YOUR_VIDEO_ID trong đoạn code dưới đây.

<div id="muteAutoPlay-JustDoBlog"></div>
 
<script async src="https://www.youtube.com/iframe_api"></script>
<script>
 function onYouTubeIframeAPIReady() {
  var player;
  player = new YT.Player('muteAutoPlay-JustDoBlog', {
    videoId: 'YOUR_VIDEO_ID', // Thay Video ID của bạn vào đây
    width: 560,               // Độ rộng khung hình (pixel)
    height: 316,              // Độ cao khung hình (pixel)
    playerVars: {
      autoplay: 1,        // Auto-play khi load video, tức mở trang web
      controls: 1,        // Hiển thị nút pause/play
      showinfo: 0,        // Ẩn tiêu đề (title)
      modestbranding: 1,  // Ẩn logo YouTube
      loop: 1,            // Chạy video với chế độ Lặp
      fs: 0,              // Ẩn nút Full Screen
      cc_load_policty: 0, // Ẩn mục Closed Captions
      iv_load_policy: 3,  // Ẩn Annotations của video
      autohide: 0         // Ẩn các nút điều khiển khi video đang chạy
    },
    events: {
      onReady: function(e) {
        e.target.mute();
      }
    }
  });
 }
 
 // Written by @labnol
 // Testing and Upgraded by Just do Blog
</script>


Tiếp theo, copy toàn bộ đoạn code trên và nhúng vào trang web của bạn, rồi lưu lại.

Nếu muốn xem demo, hãy kéo xuống cuối bài này, bạn sẽ thấy một video clip đang được chạy và volume set về 0 đó.

Bạn cũng có thể nâng cấp đoạn code trên bằng cách thay đổi các giá trị tham số như hình dưới đây. Chẳng hạn như nếu bạn set loop bằng 1, video sẽ được phát đi phát lại, LẶP liên tục. Đặt fs giá trị 1 để hiển thị nút fullscreen trong video.

Bản chất của nó là Video YouTube được nhúng vào website bằng cách sử dụng hàm API iFrame của YouTube. Khi trang web được mở, sự kiện onLoad sẽ xảy ra, lúc đó nó sẽ gọi sự kiện (event) onReady để chạy video, với các thông số đã được định sẵn bởi đoạn code trên.


code to embed youtube videos autoplay and muted

Đoạn code trong hình sẽ cho video nhúng trong website được PLAY khi load trang web, nhưng âm thanh sẽ bị tắt (MUTE).



Nhúng video YouTube PlayList


Nếu bạn muốn nhúng nhiều videos vào một trang web, bạn sẽ phải tổng hợp chúng lại thành một playlist, rồi sau đó nhúng playlist này vào website của bạn. Điều này giúp bạn có được hai ưu điểm:
  1. Bạn có thể hiển thị được thêm nhiều video mà cũng chỉ dùng ngần đó không gian web.
  2. Một playlist YouTube sẽ giúp bạn giảm đi đáng kể dung lượng của trang web bởi vì về mặt kỹ thuật mà nói, thì bạn chỉ có nhúng duy nhất một lần trình Flash của YouTube.

Vậy làm sao để nhúng một playlist vào đây?


Có vài cách, cách đơn giản nhất và chính thức nhất là mở playlist đó ra...

embed youtube playlist

...thực hiện:
  1. Click vào Playlist khi ở Dashboard, chọn Playlist muốn nhúng (embed)
  2. Click Share
  3. Click Embed
  4. Copy đoạn code iFrame
  5. Click Show More để cài đặt thêm các thông số dài, rộng, controls,...

Sau khi có đoạn code iFrame rồi thì bạn chỉ việc dán vào trong trang web (nhớ chuyển qua mục HTML editor)



Kết quả:




Hoặc bạn thay đoạn YOUR_PLAYLIST_ID bằng ID của bạn ở đoạn code dưới đây rồi dán vào website.

<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=YOUR_PLAYLIST_ID" frameborder="0" allowfullscreen></iframe>


Trên đây là iFRAME code của YouTube, cung cấp nhằm giúp đỡ người dùng dễ nhúng Playlist vào website. Còn đây là code HTML nguyên bản, không phải iFrame (không khuyên dùng vì vừa cồng kềnh, nặng nề, lại lỗi thời)


 <object width="480" height="385"> 
 <param name="movie" value="http://www.youtube.com/p/YOUR_PLAYLIST_ID"></param> 
 <param name="allowFullScreen" value="true"></param> 
 <param name="allowscriptaccess" value="always"></param>
 <embed src="http://www.youtube.com/p/ID" width="480" height="385" 
 type="application/x-shockwave-flash" allowscriptaccess="always" 
 allowfullscreen="true"></embed></object>


Bạn có thể chỉnh sửa kích cỡ của Frame để vừa với trang web của mình.

Bạn nên dùng đoạn code ngắn gọn ở phía trên (iFrame), vì nó là dạng HTML5 ready. Tức là nếu một trình duyệt chưa cài Flash thì vẫn có thể xem được video Playlist của bạn bằng code nhúng hỗ trợ bởi YouTube. (Đoạn code dài, dai phía sau chỉ dùng để lập trình).

Bạn có thể tạo một Playlist bất kỳ bằng mẹo nhỏ, tôi sẽ bàn đến trong phần SEO với YouTube Playlist trong các bài sau.


Chỉ nhúng một đoạn video YouTube (Portion)


embed a portion of youtube video


Có đôi khi, bạn chỉ có như cầu nhúng một đoạn video để minh họa cho điều gì đó và muốn người dùng tập trung vào đoạn đó mà thôi.

Lấy ví dụ, bạn nhúng một clip từ YouTube nhưng chỉ muốn người xem tập trung vào cảnh từ giây thứ ‘x’ tới đoạn giây thứ ‘y’ mà thôi, tránh không chạy thêm để loãng ý. Khi đoạn được chọn chạy xong, đoạn clip nhúng sẽ tự động dừng lại, mặc kệ độ dài còn lại là nhiều hay ít.

Có hai cách đơn giản để bạn thực hiện điều này.

1) Nhúng video với đoạn Bắt đầu

Đây là khi bạn chỉ định chỗ để bắt đầu chạy, và nó sẽ chạy tới hết đoạn clip đó thì thôi. Bạn có thể dùng các đoạn code nhúng căn bản bên trên và thêm vào tham số thời gian (tính bằng giây) như sau:

<iframe width="500" height="300" frameborder="0" allowfullscreen src="http://www.youtube.com/embed/VIDEO_ID#t=1234s"></iframe>

Thay VIDEO_ID bằng ID của bạn và thay 1234s bằng số giây của đoạn bắt đầu. Ví dụ: bạn muốn video chạy từ đoạn 03:24 (mm:ss), thì số giây sẽ là t=204s (60*3 + 24).

2) Nhúng video với đoạn Bắt đầu và Kết thúc

Đoạn video sau được lấy ví dụ từ một trailer của bộ phim Batman v Superman 2016, có độ dài hơn 8 phút, nhưng tôi sẽ chỉ nhúng một đoạn demo dài khoảng 2 phút (giây thứ 111 tới 222).

Code nhúng mặc định của YouTube không hỗ trợ phần End time, nhưng bạn có thể sử dụng một đoạn JavaScript để thực hiện điều này thông qua YouTube API.

<div videoID="7TXh0VLW3UQ" startTime="111" endTime="222" height="370" width="700" id="youtube-player"></div>

<script>
var n="youtube-player";
var y=document.createElement('script');
y.type="text/javascript";
y.src="//www.youtube.com/iframe_api";
var s=document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(y,s);
var player;var p=document.getElementById(n);
var st=p.getAttribute("startTime");
var et=p.getAttribute("endTime");
var vi=p.getAttribute("videoID");
var ph=p.getAttribute("height");
var pw=p.getAttribute("width");

  // Chuẩn bị trình Player cho YouTube
  // Đặt rel=0showinfo=1 để Ẩn các videos liên quan và thanh info
function onYouTubeIframeAPIReady(){
  player=new YT.Player(n,{
    height:ph,
    width:pw,
    playerVars:{'rel':0,'showinfo':0,'hidecontrols':1},
    events:{'onReady':lv}})
}

  // Khi player đã sẵn sàng (onReady), video sẽ được load
  // Dùng hàm cueVideoById  not loadVideoById như là
  // chức năng chính để chặn video tự động chạy
function lv(e){
  e.target.cueVideoById({
    videoId:vi,
    startSeconds:st,
    endSeconds:et
  })
}
// Designed by IT BinhDan - https://www.itbinhdan.com
</script>

Đoạn code gốc bị lỗi, và đã được sửa lại. Bạn có thể tạo một file js, upload lên host, với nội dung là toàn bộ đoạn <script> để cân bằng tải cho website chạy nhanh hơn, bằng phương pháp Web hosting, CDN bằng Google Drive, sẽ giúp bạn tối ưu băng thông và thêm điểm khi rank cho website.

Bạn chỉ cần thay đoạn VideoID tương ứng, thời gian bắt đầu (star time) và thời gian kết thúc (end time) tính theo giây. Cùng với đó là rất nhiều tham số điều khiển khác mà tôi đã nói qua ở các phần trên.


Nhúng video và Gỡ bỏ Logo YouTube


Khi nhúng video YouTube vào website, trình Player sẽ có một đoạn hiển thị logo của YouTube ở góc phải, bên dưới, cạnh các controls phóng to, thu nhỏ, fulscreen.

seo-youtube


Đó chính là logo của YouTube, chứ không phải cái nút Play màu đỏ mà bạn thấy ở tất cả các video YouTube được nhúng đâu nhé:

remove youtube logo in embed youtube videos player


Tác dụng của Logo đó trong trình Player được nhúng vào website nhằm quảng bá thương hiệu cho YouTube, và khi người dùng muốn xem chính video đó trên chính trang YouTube thì họ có thể click vào logo YouTube để được chuyển tới trang YouTube.com đồng thời mở link video đó sẵn.

Nhưng khi bạn nhúng video vào website của mình, thường bạn muốn người dùng xem video đó tại website, để tăng thêm Bounce rate chẳng hạn, và không muốn người dùng chuyển đi đâu hết. Vậy thì bạn có thể ẩn cái logo kia đi, và cách thêm vào sau VideoID một đoạn code ?modestbranding=1

Mặc định code nhúng video của YouTube là:

<iframe width="560" height="315" src="https://www.youtube.com/embed/VideoID" frameborder="0" allowfullscreen></iframe>


Để tắt logo YouTube, bạn chèn thêm đoạn ?modestbranding=1 ở ngay sau ID của video như sau:

<iframe width="560" height="315" src="https://www.youtube.com/embed/VideoID?modestbranding=1" frameborder="0" allowfullscreen></iframe>


Tham số modestbranding mới được YouTube cập nhật hỗ trợ gần đây, dùng cho cả trình duyệt có Adobe Flash và iFrame và tương thích với chuẩn HTML5.
Trước đây, để ẩn logo thì người ta sẽ thêm cả đoạn "showinfo=0" vào. Nhưng nay để gỡ bỏ logo khỏi trình duyệt khi phát video thì cần bỏ đi đoạn đó. Vì đoạn mã trên để tắt tiêu đề của video, và có lẽ nó ảnh hưởng cả tới modestbranding khiến chúng ta không hoàn toàn gỡ bỏ logo như dự tính.


Dùng YouTube video làm trình phát nhạc nền

Bạn tìm thấy một bài nhạc dạng Epic music thật tuyệt vời trên YouTube, hoặc một clip nhạc dài hơn 3 giờ, dùng để học tập thì thật là tuyệt. Bạn muốn nhúng đoạn nhạc đó vào website của mình để làm nhạc nền, và chỉ dùng phần nhạc thôi, vì mắt bạn muốn người đọc tập trung vào những thứ khác.



Để chèn nhạc của clip từ YouTube, bạn có thể tại clip đó về, tách file audio dưới dạng MP3, rồi nhúng file MP3 này vào website của bạn. Nhưng hôm nay chúng ta chỉ bàn về việc nhúng YouTube video, nên tôi sẽ không bàn đến các bước để thực hiện theo cách trên, mà chỉ cho bạn một cách khác.

Đó là một cách dựa trên nền tảng kỹ thuật CSS. Bạn sẽ nhúng YouTube video bình thường và CSS sẽ xử lý style video này thành dạng dưới đây:


YouTube video được che đi phần hiển thị hình ảnh


Bản chất của việc này là chúng ta sẽ render trình player của YouTube bằng IFRAME player và nhờ đó nó sẽ chạy trên cả trình duyệt hỗ trợ FlashHTML5.

Dưới đây là đoạn code biến YouTube video thành Audio player. Bạn chỉ cần thay VIDEOID bằng ID của clip YouTube mà bạn muốn sử dụng phần âm thanh.

<div style="position:relative;width:267px;height:25px;overflow:hidden;">
  <div style="position:absolute;top:-276px;left:-5px">
    <iframe width="300" height="300" 
      src="https://www.youtube.com/embed/VIDEOID?rel=0">
    </iframe>
  </div>
</div>

Bạn sẽ thấy logo của YouTube bên trong phần Audio player này, và khi click vào nó bạn sẽ được chuyển tới địa chỉ của video gốc trên trang web YouTube.com.


Dùng YouTube video làm WebPage BackGround

Rõ ràng rằng trong những trường hợp cụ thể, dùng hình ảnh làm nền cho website khiến người dùng có được những trải nghiệm rất tích cực khi họ ghé thăm trang web của bạn.

Hiệu ứng còn được nâng lên rõ rệt nếu đó là những hình ảnh động, ảnh hoạt hình, kèm theo nhạc nền hoặc là cả một đoạn video.

Không biết bạn có từng để ý hoặc biết là trang chủ của Bing rất hay dùng video làm nền (background), còn thường ngày thì vẫn dùng hình ảnh nào đó. Như là cảnh những chú cánh cụt nhảy lên băng từ hố rất ấn tượng.

Có nhiều cách để làm được điều đó:
  1. Bing dùng tag chuẩn HTML5 <video> để trình chiếu video ở trang chủ. Đoạn video được nhúng có kích thước vừa phom và nó không thay đổi kích cỡ theo trình duyệt, hay nói cách khác không hỗ trợ Responsive.
  2. Có các plugin jQuery hỗ trợ sẵn cho việc này, như là Tubular và BigVideo.js, giúp bạn dễ dàng sử dụng bất kì video nào, hay playlist nào, làm background.
  3. Một cách khác là dùng HTML và CSS tags (hoàn toàn không có JavaScript, nên sẽ nhẹ hơn, nhanh hơn nhiều) để đặt bất cứ YouTube video nào vào làm nền cho website.

Để thực hiện, copy và dán đoạn code dưới đây ngay gần sau tag <body> trong template. Thay ID bằng ID của video bạn dùng làm background.

<div style="position: fixed; z-index: -99; width: 100%; height: 100%">
  <iframe frameborder="0" height="100%" width="100%" 
    src="https://youtube.com/embed/VideoID?autoplay=1&controls=0&showinfo=0&autohide=1">
  </iframe>
</div>


Cơ bản chúng ta dùng IFRAME tag để nhúng video vào toàn trang web (cả rộng và cao đều đặt 100%). Tương tự, z-index có giá trị âm để hình ảnh, nội dung của video được hiển thị ở lớp dưới nội dung website, tức nội dung website sẽ nổi lên trên nội dung video.

Tuy nhiên có một điều bất tiện ở đây khi video nền sẽ không chạy trên mobile cũng như không thể tắt tiếng (MUTE) cho video, nếu không dùng đến JavaScript.


Nhúng nhạc nền bằng YouTube audio

Bạn có nhớ kỷ nguyên của GeoCities không nhỉ. Thuở đó, không phải Facebook, Twitter, Pinterest,... mà là GeoCities thống trị mạng xã hội thế giới, là website đứng hạng thứ 3 toàn cầu. Đó là khi mà một trang web có thể tự động chơi nhạc nền ngay khi vừa được truy cập, khiến cho nhiều nhân viên lúng túng khi sợ bị sếp...nghi ngờ dùng giờ công làm việc tư.

Chúng thường là các files audio nguyên gốc (RAW) như MP3, WAV hoặc MIDI được nhúng vào web. Nhưng nay bạn có thể dùng bất cứ track nhạc YouTube nào để nhúng vào website làm audio nền.

Mẹo ở đây là bạn nhúng một video YouTube bình thường, với tham số autoplay-=1, và đặt độ dài, chiều cao về zero, tức là IFRAME sẽ vô hình với mắt người dùng. Bạn có thể làm điều này với chỉ một dòng code như sau:

<embed height="0" width="0" 
  src="http://youtube.googleapis.com/v/VIDEO_ID&autoplay=1&loop=1" />



Nhúng video YouTube Nâng Cao: Hiệu quả hơn


Khi bạn nhúng bất kỳ video YouTube nào vào website với tag iFrame chuẩn, bạn sẽ ngạc nhiên rằng YouTube hỗ trợ rất nhiều chức năng chỉ để nhúng video, và nó tốt hơn hẳn nhiều phương thức SEO YouTube khác. Nhưng...


Bạn có biết rằng kèm theo đó, trọng lượng của trang web cũng tăng lên đáng kể không? Trung bình trang web sẽ tăng phì thêm 0.5 MB cho tài nguyên bổ trợ (CSS, JavaScript và hình ảnh) để hiện thị khung hình Player, ngay cả khi người xem không click vào xem một giây video nào.

Video nhúng khiến trang web của bạn nặng nề hơn và trình duyệt của người đọc vì thế cũng cần gửi thêm nhiều yêu cầu (request) HTTP để render video. Điều này khiến thời gian để tải trang web bị tăng lên đáng kể, và ảnh hưởng tới điểm số xếp hạng của web.



Một điểm trừ nữa cho các đoạn code nhúng mặc định của YouTube là nó hoàn toàn không Responsive chút nào. Nếu người đọc dùng một điện thoại di động, khung Player sẽ không tự động điều chỉnh kích thước cho vừa với màn hình, cho dù nó được nhúng vào trong một template Responsive đi chăng nữa.

Tải YouTube video Player tùy theo nhu cầu

Google plus có một phát triển thông minh để giảm thiểu thời gian cần thiết để tải YouTube video Player và chúng ta cũng có thể dùng kỹ thuật này để kết hợp với việc nhúng video YouTube, tăng điểm loading cho website.

Thay vì nhúng trọn bộ Youtube video player, Google+ chỉ hiển thị ảnh thumbnail của cái video đó và một nút Play đặt giữa ảnh, và nó khiến nhìn không khác gì một Youtube video player chính cống. Ví dụ:

lazzy loading youtube videos embed



Khi người dùng click vào nút Play, ảnh thumbnail sẽ được thay thế bởi Youtube video player với tham số autoplay được set về 1 để chạy ngay lập tức. Các tài nguồn dữ liệu cần thiết đến lúc đó mới được tải về, sau khi người dùng đã quyết định mở video để xem.

Code để nhúng video YouTube thì các bạn đã quá rành rồi nhỉ, bạn có thể chỉ định độ cao, rộng và ID, dạng như sau:

<iframe width="320" height="180" 
     src="http://www.youtube.com/embed/JhbZknFI72Q">
</iframe>


Nhúng YouTube videos theo cách Responsive mà không tăng thời gian tải trang

Code dạng on-demand (theo yêu cầu) có khác đi đôi chút vì chúng ta sẽ nhúng khung YouTube video player một cách Responsive và khung iFrame cũng chỉ thực sự được thêm vào sau khi người dùng click vào nút Play.

Dán đoạn code sau vào nơi bạn muốn hiển thị video. Nhớ thay VideoID với ID thực của bạn. CSSJavaScript sẽ được thêm vào template riêng biệt. Bạn cũng không cần nhập thông số chiều cao và chiều rộng vì nó là Responsive mà.

<div class="youtube-container">
   <div class="youtube-player" data-id="VIDEOID"></div>
</div>


Bạn có thể chèn nhiều đoạn code nếu muốn nhúng nhiều videos vào trang web của mình. Các đoạn code này sẽ giống hệt nhau trừ cái VideoID.


JavaScript

Đoạn code JavaScript sẽ quét qua trang web của bạn để tìm dấu hiệu các video được nhúng. Nếu tìm thấy, nó sẽ dùng ảnh thumbnail cho vùng đó (thay cho khung Player thực sự) và kèm theo một sự kiện onclick để lắng nghe xem khi nào thì người dùng click vào nút Play trên hình thumbnail. Khi đó, nó sẽ thay thế cái image bằng video YouTube thực sự với chế độ autoplay.

<script>
(function() {
    var v = document.getElementsByClassName("youtube-player");
    for (var n = 0; n < v.length; n++) {
        var p = document.createElement("div");
        p.innerHTML = labnolThumb(v[n].dataset.id);
        p.onclick = labnolIframe;
        v[n].appendChild(p);
    }
})();
 
function labnolThumb(id) {
    return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>';
}
 
function labnolIframe() {
    var iframe = document.createElement("iframe");
    iframe.setAttribute("src", "//www.youtube.com/embed/" + this.parentNode.dataset.id + "?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0");
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("id", "youtube-iframe");
    this.parentNode.replaceChild(iframe, this);
}
</script>


CSS

Nếu bạn có dùng file CSS ngoài (external) thì mở file đó ra và dán đoạn code sau vào, lưu lại, dùng Google Drive là file-hosting.

Nếu bạn không có file CSS ngoài và thường dán luôn code CSS vào template thì tốt nhất bạn không nên tiếp tục. Hãy dừng lại tại đây và tìm cách chuyển toàn bộ code CSS ra link ngoài để giảm tải cho trang web. Mục đích của việc tối ưu nhúng video này nhằm để tăng thời gian tải trang, mà bạn dán code vào template thì cũng bằng... không.

OK, đoạn code CSS như sau:

<style>
.youtube-container { 
   display: block; 
   margin: 20px auto; 
   width: 100%; 
   max-width: 600px; 
}
.youtube-player { 
   display: block; 
   width: 100%; /* assuming that the video has a 16:9 ratio */ 
   padding-bottom: 56.25%; 
   overflow: hidden; 
   position: relative; 
   width: 100%; 
   height: 100%; 
   cursor: hand; 
   cursor: pointer; 
   display: block; 
}
img.youtube-thumb { 
   bottom: 0; 
   display: block; 
   left: 0; 
   margin: auto; 
   max-width: 100%; 
   width: 100%; 
   position: absolute; 
   right: 0; 
   top: 0; 
   height: auto
}
div.play-button { 
   height: 72px; 
   width: 72px; 
   left: 50%; 
   top: 50%; 
   margin-left: -36px; 
   margin-top: -36px; 
   position: absolute; 
   background: url("http://i.imgur.com/TxzC70f.png") no-repeat; 
}
#youtube-iframe { 
   width: 100%; 
   height: 100%; 
   position: absolute; 
   top: 0; 
   left: 0; 
}
</style>

Phương thức này sẽ giảm tải khoảng 300 - 400 KB cho trang web của bạn, đồng thời giúp website thân thiện với mobile (friendly).

Kiểu lập trình này là kiểu Lazzy loading, thường dùng trong thiết kế template, tải ảnh khi cuộn trang. Nguyên lý của phương thức Lazzy loading là chỉ khi cần mới chạy sự kiện, ứng dụng tương ứng, chứ không nạp một lúc mọi thứ. Và khi mà những thứ cần tải sau này được lưu trữ, hosting ở tài nguyên bên ngoài thì website của bạn sẽ càng nhẹ nhàng hơn nữa.


Các bạn triển khai có vấn đề gì thì hãy phản hồi ở đây, hoặc có góp ý gì thì đóng góp cho IT BinhDan nhé.


Xem thêm:

Cám ơn và Chúc các bạn thành công!

PS: dưới đây là đoạn video tự chạy nhưng volume được chuyển về 0, và nó chạy từ khi bạn mở trang web này đấy.

Related Posts