How to Embed Video

Hello everyone, today I would like to show you how to embed videos from various websites such as: Dailymotion, Google Drive, Odnoklassniki (ok.ru), Vimeo, Youtube ... In addition, you only use one line of code to post to the video to show! Do not wait long, learn to install with me below.

1. Go to Theme, click the sign ▼ Then use the word Edit HTML.
2. Copy the following code from above </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;
}

3. Copy the following code from above </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>

4. Click the Save Icon and leave the Edit HTML tab.
5. Choose any of the following code to 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>

Thank you, see you later.