Nhúng youtube full vào web | Học lập trình cùng iif

1. Cách nhúng youtube vào web

XX: là mã video trên youtube

** Đối với web iif lệnh nhúng youtube:

{{ytb:ID:ytb}} thay thếID thành mã video trên youtube
* Nhớ copy vào xóa định dạng hay copy qua notepad rồi copy vào.

2. Ví dụ điều khiển play youtube bởi javascrip

Nếu bạn không muốn sử dụng API YouTube nhưng vẫn muốn điều khiển video, một lựa chọn khác là sử dụng postMessage, một phương thức giao tiếp giữa các cửa sổ (window) hoặc iframe trong JavaScript. Tuy nhiên, phương thức này yêu cầu bạn phải làm việc với một số lệnh JavaScript của YouTube (nhưng không dùng API chính thức).

Ví dụ dưới đây cho phép bạn gửi lệnh phát video từ trang web của bạn vào iframe YouTube:
HTML:

<iframe id="youtube-iframe" width="560" height="315"
    src="https://www.youtube.com/embed/65ZWE8-Psoo?enablejsapi=1&origin=http://example.com"
    title="YouTube video player" frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    referrerpolicy="strict-origin-when-cross-origin"
    allowfullscreen>
</iframe>

<button onclick="playVideo()">Play Video</button>

JavaScript:

function playVideo() {
    var iframe = document.getElementById('youtube-iframe');
    var message = {
        event: 'command',
        func: 'playVideo',
        args: []
    };
    // Gửi message đến iframe
    iframe.contentWindow.postMessage(JSON.stringify(message), '*');
}

Giải thích:

    postMessage: Đây là một phương thức cho phép gửi thông điệp từ cửa sổ chính đến iframe. Tuy nhiên, YouTube cũng hỗ trợ nhận các lệnh thông qua cơ chế này.
    Gửi lệnh playVideo: Bạn tạo ra một đối tượng chứa lệnh yêu cầu video phát và gửi nó đến iframe.contentWindow qua postMessage.
    enablejsapi=1 và origin=http://example.com: Đảm bảo rằng YouTube chấp nhận các lệnh gửi từ domain của bạn. Cần phải thay http://example.com bằng domain thật của bạn.

Lưu Ý:

    Hạn chế của phương pháp này: Khi không sử dụng API chính thức của YouTube, bạn sẽ gặp một số hạn chế và có thể không tương tác linh hoạt với video như khi dùng API chính thức (ví dụ như không thể tạm dừng, thay đổi âm lượng, v.v.).
    Trình duyệt hỗ trợ: Một số trình duyệt có thể yêu cầu các quyền đặc biệt hoặc không hỗ trợ giao tiếp với iframe qua postMessage nếu nó đến từ một domain khác. Hãy chắc chắn rằng bạn kiểm tra trang của mình trong các trình duyệt phổ biến.

Kết luận:

    Nếu bạn không muốn sử dụng API của YouTube, bạn có thể sử dụng autoplay=1 để video tự động phát khi iframe được tải.
    Phương pháp postMessage có thể cho phép bạn điều khiển video mà không cần sử dụng API chính thức, nhưng cách này vẫn cần phải tuân thủ một số quy định của YouTube và có thể khó khăn hơn trong việc tương tác phức tạp.

Tuy nhiên, cách tốt nhất và linh hoạt nhất vẫn là sử dụng API của YouTube, vì nó cung cấp nhiều tính năng mạnh mẽ và dễ sử dụng.

Thay đổi video khác

Nếu bạn không muốn thay đổi URL của iframe và vẫn muốn sử dụng một cách điều khiển video mà không cần API của YouTube, bạn có thể dùng postMessage để yêu cầu iframe tải video mới. Tuy nhiên, phương thức này yêu cầu sử dụng tính năng của API YouTube, mặc dù bạn không cần phải tạo đối tượng Player và có thể giao tiếp trực tiếp với iframe qua postMessage.
HTML:

<iframe id="youtube-iframe" width="560" height="315"
    src="https://www.youtube.com/embed/65ZWE8-Psoo?enablejsapi=1&origin=http://example.com"
    title="YouTube video player" frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    referrerpolicy="strict-origin-when-cross-origin"
    allowfullscreen>
</iframe>

<button onclick="changeVideo('dQw4w9WgXcQ')">Change Video</button>

JavaScript:

function changeVideo(videoId) {
    var iframe = document.getElementById('youtube-iframe');
    var message = {
        event: 'command',
        func: 'loadVideoById',
        args: [videoId]
    };
    iframe.contentWindow.postMessage(JSON.stringify(message), '*');
}

Giải thích:

    postMessage: Đây là cách gửi một thông điệp tới iframe để yêu cầu nó thực hiện một hành động. Trong trường hợp này, bạn sẽ gửi lệnh loadVideoById để yêu cầu iframe tải một video mới.
    Lệnh loadVideoById: Đây là một lệnh của API YouTube mà bạn có thể gửi tới iframe thông qua postMessage. Lệnh này yêu cầu iframe tải video mới từ ID video mà bạn cung cấp.
    videoId: Tham số này là ID của video mà bạn muốn phát. Bạn có thể thay thế 'dQw4w9WgXcQ' bằng bất kỳ ID video YouTube nào.

Giả sử bạn muốn video bắt đầu từ giây thứ 30, bạn sẽ thay đổi mã như sau:
HTML:

<iframe id="youtube-iframe" width="560" height="315"
    src="https://www.youtube.com/embed/65ZWE8-Psoo?enablejsapi=1&origin=http://example.com"
    title="YouTube video player" frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    referrerpolicy="strict-origin-when-cross-origin"
    allowfullscreen>
</iframe>

<button onclick="changeVideo('dQw4w9WgXcQ', 30)">Change Video</button>

JavaScript:

function changeVideo(videoId, startTime) {
    var iframe = document.getElementById('youtube-iframe');
    var message = {
        event: 'command',
        func: 'loadVideoById',
        args: [videoId, startTime] // Thêm thời gian bắt đầu vào tham số args
    };
    iframe.contentWindow.postMessage(JSON.stringify(message), '*');
}

Giải thích:

    Thêm Tham số Thời gian Bắt đầu: Trong hàm changeVideo, chúng ta đã thêm một tham số startTime để chỉ định thời gian (tính bằng giây) mà video sẽ bắt đầu. Ví dụ, khi nhấn nút, video sẽ bắt đầu từ giây thứ 30.
    Tham số args trong loadVideoById: Hàm loadVideoById có hai tham số:
        Video ID: Để xác định video bạn muốn phát.
        Thời gian bắt đầu: Thời gian (tính bằng giây) từ đó video sẽ phát.

Ví dụ:

Khi nhấn nút "Change Video", video mới sẽ bắt đầu từ giây thứ 30, với ID video là 'dQw4w9WgXcQ'. Bạn có thể thay đổi tham số này theo ý muốn.

Nếu bạn muốn thay đổi thời gian bắt đầu (ví dụ 60 giây), chỉ cần gọi hàm như sau:

changeVideo('dQw4w9WgXcQ', 60); // Video bắt đầu từ giây thứ 60

3. Tài liệu hướng dẫn từ google nhúng youtube vào web

https://developers.google.com/youtube/player_parameters?hl=vi