How to Embed Content in HTML

There was a time when the Internet was primarily driven by text content. There was no option to embed those cute cat images and funny videos in your blog.

Slowly time changed, and we got to where we are right now, with rich content spread all around us. But who and what caused this change? Let's learn together. But before that, here's a quick introduction to embedding if you are not aware of what it is -

Embedding refers to integrating external content on your webpage like images, videos, social media posts, etc. that look native as if they are naturally part of your webpage.

Now let's learn about the good old part of the web-

History of Embedding in HTML

In the early ’90s, our beloved web was very different than it is today. A dedicated group of geeks used e-mail lists to discuss the future of the language at its core, HTML. (Source: Wired)

Marc Andreesen(future Netscape founder) shared the details of his new creation - the tag in an email he wrote on 25th Feb 1993. This was the beginning of both embedding images in HTML and embedding in general.

After that, Netscape created the <EMBED>(now deprecated) tag which made it possible to embed external resources like audio, video, etc in the HTML. Thanks to the <EMBED> tag, we can embed YouTube videos in emails, tweets, articles, Facebook posts, and other places.

Types of Content you can embed

1. Media Files - Images, Audio, Videos, GIFs, etc.
2. Social Media - Tweets, Facebook and Instagram posts, Pinterest pins and boards, LinkedIn posts, etc.
3. Music Platforms - These days it's also possible to embed audio content from music platforms like Spotify, SoundCloud, etc.
4. Video Platforms - This includes embedding videos from platforms like YouTube, Dailymotion, Vimeo, etc.
5. Forms - Embedding third-party form services like Google Forms, Typeform, etc.
6. Other Widgets - You can embed countless other widgets on your website. Some of the popular ones are - Google Reviews, Countdown Timer, World Clock, Google Maps, Paypal/Patreon buttons, Weather, etc.

Benefits of embedding rich content

1. Captures attention

Images and Videos are visually appealing to the eyes. In the age of the Internet, where most people come to your website only to skim content, rich media helps you grab the attention of users by creating differentiation and by giving them the hook to go slow.

2. Reduces bounce rate

This is the continuation of the last point. With enough rich media content placed in proper places, it will force the users to go slow and actually see what's on the webpage. This will make them stay on the webpage for longer, and in turn reduce the bounce rate of your website.

3. Increases CTR

When users will spend more time on your website and are happy with the content, there are more likely to interact with the webpage. So, whether you want them to watch a YouTube video, want to collect their email IDs, or redirect them to another webpage, the likelihood of that increases when they stay on the page for more extended periods of time.

4. Complements the content

Media types like images related to the content, Infographics, GIFs, YouTube videos, tweets, etc. provide completeness to your content and help users get additional information on the topic. Placing images and GIFs in the right places also helps in storytelling.

EXAMPLE: Embedding different content types in HTML

In this section, we will see some practical examples of how to embed certain media types in HTML like audio, video, tweet, Instagram post, etc-

Embedding audio in HTML

<audio

    controls

    src="/media/cc0-audio/fire.mp3">

</audio>

• The above code is a hypothetical example of embedding a fire sound in the webpage.
• To embed audio, you have to use the <audio> element and specify the address of the file in the src attribute similar to images.
• The controls attribute is there to add audio control options like play/pause, mute, volume control, etc.
• You can write additional code inside the <audio></audio> element as a fallback in case the browser can't read the audio file.

Embedding video in HTML

<video

    controls

    width="200"

    src="rain.mp4">

</video>

• To embed a video file, you have to use the <video> element and define the address in the src attribute.
• You can also use the width attribute to specify the width of the video panel, in the above case, it's 200px.
• As a fallback option, you can also write some code within the <video></video> element similar to audio.
• If you have multiple video files, you can use the <source></source> element to define each file. This element also works for audio files.

Embedding a Tweet in HTML

• Open a tweet in your browser and click on the three dots in the top right corner of the tweet.
• Click on Embed Tweet from the available options.
• This will redirect you to the publish.twitter.com page with the embed code for the tweet already available.
• Now, click on Copy Code, this will copy the embed code to the clipboard. You can now paste this code on your blog or website to display the tweet natively to your users.

Embedding a Facebook post in HTML

• Go to the Facebook post you want to embed in your browser and click on the three dots in the top right corner of the post.
• Click on Embed from the available options. A dialog box will now open on your screen.
• The dialog window will show you the <iframe src="...">...</iframe> code that you have to copy.
• Click on Copy Code button and paste the code on your website where you want to show the post to your users.

Embedding an Instagram post in HTML

• Go to the Instagram post you want to embed in your browser and click on the three dots in the top right corner of the post.
• Click on Embed from the available options. A small pop-up will now appear on your screen with the embed code.
• There will be a checkbox - Include a caption. Check or uncheck it depending on whether you want to include the captions or not.
• Click on Copy embed code button and paste the code on your website where you want to show the post to your users.

Embedding a Codepen Pen in HTML

• Open the Pen you want to embed and click on Embed in the footer. A dialog box will appear now with lots of customization options.
• You can choose your options to select a default tab - HTML, CSS, or JS, select the theme, choose whether the code is loaded by default or not, and choose whether you want to make the code editable or not.
• Once you have gone through all the options and chosen the appropriate settings, copy the code appearing within the popup window and paste it onto your website.

Embedding a YouTube video in HTML

• Embedding a YouTube video on your website is the easier of all the options listed in this
• Open the webpage of the video you want to embed. Right-click on the video panel and click on Copy embed code.
• That's it. Now paste the code on your website where you want to embed the video.

Wrapping Up

In 2023, it's crucial to have rich content in your content strategy. We have already covered the benefits of embedding rich content on your website and various examples of how you can do it.

I hope you liked this article and it enlightened you about embedding rich content and how to do it. If you have got any questions, DM me on Twitter.