Chèn video youtube vào wordpress | Shortcode Embed Video Youtube

Cập nhật lần cuối 16/03/2017 by trong WordPress vào 13/10/2013 có 657 Views

Chào các bạn!

Hôm này mình sẽ chia sẻ cách tạo shortcode để nhúng video youtube vào trang web sử dụng WordPress nha.

Trước tiên các bạn cần đăng ký shortcode này. Các bạn thêm đoạn code này vào file functions.php nha

//Embed Video Youtube
function svl_youtube($atts, $content=null){  
    extract(shortcode_atts(array(
        'id' => ''
    ), $atts));  
    $return = $content;  
    if($content){
        $return .= '<div class="videoWrapper"><iframe width="560" height="349" src="http://www.youtube.com/embed/' . $id . '" frameborder="0" allowfullscreen></iframe></div>';
    }
    return $return;  
}  
add_shortcode('youtube', 'svl_youtube');

OK. Thế là được rồi đó. Bjo mình sẽ hướng dẫn sử dụng nha.

Trong khi soạn thảo. Bạn hãy chuyển sang chế đọ HTML và pase đoạn code này vào chỗ muốn hiển thị video nha.

[ youtube id="vGR7Qbbgs-s" ][/youtube ] 
//Vì trong bài nhận shortcode lên mình đã để dấu cách ở chỗ 
[ youtube bạn xóa dấu cách đó đi khi paste vào bài viết nhé

Trong đó: vGR7Qbbgs−s là id của video trên youtube mà bạn muốn thêm vào.

Ví dụ:

  • Link youtube của bạn có dạng như sau: http://www.youtube.com/watch?v=o6HMA4_05dM
  • Thì Id của video đó là : o6HMA4_05dM
  • Trong một số trường hợp video sẽ có dạng link là: http://www.youtube.com/watch?v=o6HMA4_05dM&feature=my_liked_videos&list=LLONI397il4-VZaGQgfzX1Vw Khi đó Id của video cũng là: o6HMA4_05dM nha.

Khi đã có được id rồi thì bạn thay vào code trên là có thể chạy được rồi.

Thêm đoạn css sau để cho cái iframe respon nhé. Nó sẽ hiển thị đầy đủ và đẹp cả trên mobile và desktop

.videoWrapper {
   position: relative;
   padding-bottom: 56.25%; /* 16:9 */
   padding-top: 25px;
   height: 0;
}
.videoWrapper iframe,
.videoWrapper object,
.videoWrapper embed{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

Demo:

Chèn video youtube vào wordpress | Shortcode Embed Video Youtube
4.3 (86.67%) 3 votes
  • Bình luận
Có thể bạn quan tâm
x