របៀប Embed វីដេអូ

សួស្ដី​អ្នក​ទាំង​អស់​គ្នា ថ្ងៃ​នេះ​ខ្ញុំ​សូម​បង្ហាញ​ពី​របៀប Embed វីដេអូ​ពី​វេបសាយ​ផ្សេងៗ​ដូច​ជា៖ Dailymotion, Google Drive, Odnoklassniki ( ok.ru ), Vimeo, Youtube... លើស​ពី​នេះ​ទៅ​ទៀត​អ្នក​គ្រាន់​តែ​ប្រើ​ប្រាស់​កូដ​មួយ​បន្ទាត់​ប៉ុណ្ណោះ​ក្នុង​ការ Post ដើម្បី​អោយ​វីដេអូ​បង្ហាញ តោះ! កុំ​ចាំ​យូរ​រៀន​តម្លើង​ជា​មួយ​ខ្ញុំ​នៅ​ខាង​ក្រោម។



១.ចូល​ទៅ​កាន់ Theme ចុច​សញ្ញា ▼ រួច​យក​ពាក្យ Edit HTML
២.ចម្លង​កូដ​ខាង​ក្រោម​ដាក់​ពី​ខាង​លើ </b:skin>

.embed-container {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 56.25%;
  overflow: hidden;
  background: #000000;
  border: 4px solid #8000ff;
  border-radius: 4px;
}
.embed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

៣.ចម្លង​កូដ​ខាង​ក្រោម​ដាក់​ពី​ខាង​លើ </body>

<script type="text/javascript">
//<![CDATA[
class RSTVideoEmbed {
    constructor(element, options = {}) {
        this.playerElement = document.getElementById(element);
        this.options = {
            autoplay: false,
            ...options
        };
    }
    removeAttributes() {
        const attributes = Array.from(this.playerElement.attributes);
        attributes.forEach(attribute => {
            if (attribute.name !== "id") {
                this.playerElement.removeAttribute(attribute.name);
            }
        });
    }
    init() {
        if (this.playerElement) {
            const videoId = this.playerElement.dataset.id;
            const videoUrl = this.playerElement.dataset.url;
            const provider = this.playerElement.getAttribute("provider");
            const isAutoplay = this.options.autoplay ? "?autoplay=1" : "";
            const getProviders = {
                dailymotion: `https://www.dailymotion.com/embed/video/${videoId}${isAutoplay}`,
                googledrive: `https://drive.google.com/file/d/${videoId}/preview`,
                ok: `https://ok.ru/videoembed/${videoId}${isAutoplay}`,
                vimeo: `https://player.vimeo.com/video/${videoId}${isAutoplay}`,
                youtube: `https://www.youtube.com/embed/${videoId}${isAutoplay}`
            };
            const url = getProviders[provider] || `${videoUrl || "about:blank"}`;
            let okReferrer = '';
            if (window.location.href.includes(".blogspot.com") && provider === "ok") {
                okReferrer = ` referrerpolicy="no-referrer"`;
            }
            this.playerElement.innerHTML = `<div class="embed-container"><iframe src="${url}" width="100%" height="100%" allow="autoplay; fullscreen"${okReferrer} loading="lazy"></iframe></div>`;
            this.removeAttributes();
        }
    }
    static render(element, options) {
        return new RSTVideoEmbed(element, options).init();
    }
}
RSTVideoEmbed.render("embed-player", {
    autoplay: true
});
//]]>
</script>

៤.ចុច Icon Save រួច​ចាក​ចេញ​ពី​ផ្ទាំង Edit HTML
៥.ជ្រើសរើស​កូដ​ណា​មួយ​ខាង​ក្រោម ដាក់​ចូល​ទៅ​កាន់ Blog Post (HTML View)

<div id="embed-player" data-id="x8fk3rq" provider="dailymotion"></div>

<div id="embed-player" data-id="0Bwh7cTp2lB3PRmgtODRWOENEb28" provider="googledrive"></div>

<div id="embed-player" data-id="4782018661043" provider="ok"></div>

<div id="embed-player" data-id="208621116" provider="vimeo"></div>

<div id="embed-player" data-id="nAvDh3to9oY" provider="youtube"></div>

<div id="embed-player" data-url="https://rumble.com/embed/v3ccruu"></div>

សូម​អរគុណ​ជួប​គ្នា​ពេល​ក្រោយ​ទៀត៕