How to Embed Video

Hello everyone! In this tutorial, I will show you a simple way to embed videos from different platforms directly into your Blogger website. You can easily display videos from popular platforms such as Dailymotion, Google Drive, Ok.ru (Odnoklassniki), Vimeo, and YouTube.

The best part is that you only need a single line of code to display the video player inside your blog post. This method makes it easy to add videos without complicated setup.

So, without wasting time, let's get started and learn how to install and use this video embed feature step by step 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.