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 he wrote on 25th Feb 1993. This was the beginning of both embedding images in HTML and embedding in general. email 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 videos in emails, tweets, articles, Facebook posts, and other places. YouTube Types of Content you can embed Images, Audio, Videos, GIFs, etc. Media Files - Tweets, Facebook and Instagram posts, Pinterest pins and boards, LinkedIn posts, etc. Social Media - These days it's also possible to embed audio content from music platforms like Spotify, SoundCloud, etc. Music Platforms - This includes embedding videos from platforms like YouTube, Dailymotion, Vimeo, etc. Video Platforms - Embedding third-party form services like Google Forms, Typeform, etc. Forms - 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. Other Widgets - 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 element and specify the address of the file in the attribute similar to images. <audio> src The attribute is there to add audio control options like play/pause, mute, volume control, etc. controls You can write additional code inside the element as a fallback in case the browser can't read the audio file. <audio></audio> Embedding video in HTML <video

    controls

    width="200"

    src="rain.mp4">

</video> To embed a video file, you have to use the element and define the address in the attribute. <video> src You can also use the attribute to specify the width of the video panel, in the above case, it's 200px. width As a fallback option, you can also write some code within the element similar to audio. <video></video> If you have multiple video files, you can use the element to define each file. This element also works for audio files. <source></source> 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 page with the embed code for the tweet already available. publish.twitter.com 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 code that you have to copy. <iframe src="...">...</iframe> Click on button and paste the code on your website where you want to show the post to your users. Copy Code 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 from the available options. A small pop-up will now appear on your screen with the embed code. Embed There will be a checkbox - . Check or uncheck it depending on whether you want to include the captions or not. Include a caption Click on button and paste the code on your website where you want to show the post to your users. Copy embed code 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

Facebook

Google

Instagram

Twitter

YouTube

13 Useful React Libraries for Devs in 2023

9 Step Solution to Escape Tutorial Hell Permanently

Get In Touch With Me

2021 - HackerNoon Contributor of the Year - SIDE-PROJECT

Nominated for 2022 - HackerNoon Contributor of the Year - Programming

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nominated for 2022 - Software Developer of the Year

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Beginners Guide

Nominated for Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Open Source

Too Long; Didn't Read

How to Embed Content in HTML

How to Embed Content in HTML

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

10 Reasons To Use TailwindCSS In Your Next Project

Meet the Writer: Hacker Noon's Contributor Lucas Matheus, Tech Entrepreneur, Tech Lead and Hacker

OpenAI Puts Guardrails on Its Open-Weight GPTs

THE INFANTILE SEXUALITY

10x Growth in 7 Months: How we Invest by Developing Software

10 Ways You Can Make Money Online From Your Home

10 Reasons To Use TailwindCSS In Your Next Project

Meet the Writer: Hacker Noon's Contributor Lucas Matheus, Tech Entrepreneur, Tech Lead and Hacker

OpenAI Puts Guardrails on Its Open-Weight GPTs

THE INFANTILE SEXUALITY

10x Growth in 7 Months: How we Invest by Developing Software

10 Ways You Can Make Money Online From Your Home

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps