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
Để duy trì blog nên mình có làm aff cho 1 số bên hosting. Nhưng dù aff mình cũng chọn 1 số nhà cung cấp uy tín về chất lượng và support nên các bạn cứ yên tâm nhé.
Nếu có mua hosting mà có trong list dưới đây các bạn click vào link trước khi mua để ủng hộ mình nhé. Mình cảm ơn nhiều
- Azdigi: Giá rẻ thì dùng gói Pro Gold Hosting còn chất lượng hơn thì em khuyên dùng Business Hosting. Có điều kiện thì lên VPS nhé
- Tino hosting
- iNet
- Nước ngoài thì Vultr
//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:
- Bình luận
