Cách chèn link youtube nhúng frame bằng acf wordpres 2024

Chèn Link youtube được anh em làm web và wordpress rất ưa dùng vì tính chuyên nghiệp và mạnh của nó,chưa kể việc đặt videos lên youtube sẽ có 1 phần traffic rất lớn từ Youtube đổ về nên việc dẫn link youtube về có lợi nhiều hơn là có hại.
Do đặc thù của link chèn Frame youtube có khác với Link đang chạy từ trình duyệt nên khi bạn chèn link vào muốn nó hiện thị ra bài đăng cần chèn dạng ID ( tức là chỉ chèn mỗi ID của youtube thôi ) hoặc chèn Link góc thì phải dùng code để tách ID ra sau đó mới nhúng với Frame thì Link youtube mới chạy được. Bài hôm nay tớ sẽ hướng dẫn bạn Chèn nhé

Cách chèn link youtube nhúng frame bằng acf trong wordpress

Cách nhúng video YouTube vào bài viết WordPress

#1. Phương pháp oEmbed

oEmbed là giao thức cho phép nhúng video, hình ảnh, văn bản, v.v. từ trang A đến trang B chỉ bằng cách nhập nguồn URL.

Đây là cách dễ nhất để nhúng video vào WordPress mà bạn không cần hiểu lập trình cũng có thể làm được. Các bước thực hiện như sau:

Truy cập https://youtube.com/
Tìm video muốn nhúng.
Di con trỏ chuột đến thanh URL và copy URL video.
Tại Visual editor WordPress, bạn paste URL của video vào

Cach Chen Video Youtube Vao WordPress Cách chèn link youtube nhúng frame bằng acf trong wordpress — #1. Phương pháp oEmbed – chèn link youtube nhúng frame bằng acf

sau khi chèn thế là OK rồi

#2. Phương pháp iframe

Phương pháp này cho phép bạn tùy chỉnh cách hiển thị video trên bài đăng hoặc trên trang. Các bước thực hiện như sau:

Nhấp vào nút Share phía trên nút Subscribe.
Nhấp vào Embed. Tại đây bạn sẽ nhìn thấy code iframe và một số box tùy chọn:

– Box đầu tiên Start at: Cho phép bạn nhúng video Youtbe bắt đầu tại một thời điểm. Để chọn được thời điểm bắt đầu phù hợp với mong muốn, bạn cần xem video trước. – Box thứ hai EMBED OPTIONS: Hiển thị các nút điều khiển trình phát như phát/ tạm dừng, âm lượng và nút tua nhanh

#2. Phương pháp iframe – chèn link youtube nhúng frame bằng acf

với Phương pháp thứ 2 thì chèn dạng code , tuy nhiên phương pháp này khá phức tạp nhất là đối với người dùng thì việc chèn như thế này là quá khó

#3 Cách nhúng video YouTube bằng ACF

giới thiệu qua về cách này, Khi bạn có 1 link review bạn muốn nhúng vào frame nếu dùng 2 cách trên ( chèn trực tiếp link như #1 thì WP auto nhận link và chèn Media cho bạn , hoặc cách #2 thì chèn nguyên code ifame vào và auto chạy thôi )
vấn đề ở đây là khách muốn chèn link youtube = > bài đăng auto chèn Ifame ra bài đăng ( hoặc tab hoặc box hoặc lighbox ) thì Phương Pháp #3 này sẽ giúp bạn đúng yêu cầu nhé .

Chuẩn Bị Field ACF Videos

trong acf bạn tạo 1 Field là link_videos trường nó mình chọn là URL mục đích là cho khách dán link youtube ở bài đăng Sản phẩm

Cách Nhúng Video Youtube Bằng Acf Flatsome.xyz — 3 Cách nhúng video YouTube bằng ACF –

chọn hiện thị Show this field group if = chọn hiện thị ở Sản phẩm. Khi bạn đăng Sản phẩm thì sẽ có 1 box chứa Url như thế này

Cách Nhúng Video Youtube Bằng Acf 2 Flatsome Cách chèn link youtube nhúng frame bằng acf trong wordpress — chèn link youtube nhúng frame bằng acf

Code Tách ID từ Link Youtube chèn vào Iframe

Sau khi bạn dán link Youtube muốn chèn được vào Iframe thì phải dùng có Tách ID ra khỏi URL youtube sau, Chèn code này vào Funtion của theme đang dùng nhé

// Tách ID từ link Youtube chèn Iframe - flatsome.xyz
add_shortcode('linkvideos', 'embed_video_youtube');

function getYouTubeVideoId($link) {
    $link = get_field('link_videos'); 
    $pattern = '/(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/';
    preg_match($pattern, $link, $matches);
    return isset($matches[1]) ? $matches[1] : false;
}

function embed_video_youtube($link) {
    $video_id = getYouTubeVideoId($link);
    if ($video_id) {
        $embed_code = '<iframe width="560" height="315" src="https://www.youtube.com/embed/' . $video_id . '" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
        return $embed_code;
    } else {
        return 'Không thể nhúng video từ liên kết này.';
    }
}

// Tách ID từ link Youtube chèn Iframe - flatsome.xyz

add_shortcode('linkvideos', 'embed_video_youtube');

function getYouTubeVideoId($link) {

$link = get_field('link_videos');

$pattern = '/(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/';

preg_match($pattern, $link, $matches);

return isset($matches[1]) ? $matches[1] : false;

}

function embed_video_youtube($link) {

$video_id = getYouTubeVideoId($link);

if ($video_id) {

$embed_code = '<iframe width="560" height="315" src="https://www.youtube.com/embed/' . $video_id . '" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';

return $embed_code;

} else {

return 'Không thể nhúng video từ liên kết này.';

}

sau khi bạn chèn code trên , bạn có thể dán Short linkvideos vào vị tri mà bạn muốn videos hiện thị nhé

ở Demo mình cho hiện thị ở dạng Lighbox sẽ có như này

Cách Nhúng Video Youtube Bằng Acf 3 Flatsome – chèn link youtube nhúng frame bằng acf

OK với thủ thuật trên, giờ đây bạn chỉ cần dán link youtube vào = > Code sẽ Auto chèn iframe cho bạn, để bạn có thể chèn bất cứ chỗ nào mà bạn muốn nhé

Kết Luận

Để chèn video từ YouTube vào trang web, bạn có thể sử dụng mã nhúng được cung cấp bởi YouTube. Bạn chỉ cần sao chép mã nhúng từ trang video YouTube mà bạn muốn chia sẻ và dán mã đó vào mã nguồn của trang web của mình. Điều này sẽ hiển thị video YouTube đó trực tiếp trên trang web của bạn. Và có nhiều cách để bạn có thể chèn vào web của bạn 1 cách nhanh và chuyên nghiệp nhé

Hi vọng qua bài đăng mình giới thiệu thêm cho bạn 1 phương pháp chèn hiệu quả và custom theo ý muốn,

Chúc bạn thành công