Multimedia is an extremely important component of the modern web application. You may want to include videos, maps, or any social media widget in any web page. HTML offers plenty of elements to make the easy integration of all the external content into the web pages. In this chapter, we are going to learn how to embed YouTube videos, Google Maps, use the <iframe> tag, add some social media widgets, and use the HTML <canvas> element to draw graphics.
10.1 Embedding YouTube Videos
Other forms of enrichment include video embedded and hosted by using YouTube. Youtube.net provides a mechanism for embedding. The user can post contents on web pages but with a notation that the material came from the particular source.
To add a YouTube video, you use an <iframe> tag, and the tag needs to contain a unique URL provided by YouTube. Here’s how it works:
Example:
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Here, width and height are for the size of embedded video. Src is an attribute holding the YouTube video URL to embed. Allow full screen enables a viewer to watch video in full screen.
Activity:
- Embed your favorite You-Tube video on a webpage. Experiment with different sizes to see how it looks at the different resolutions of your screen.
10.2 Embedding Google Maps
A good way to visually show location-based information is by embedding maps onto your web page: especially for businesses or events. Google Maps uses an <iframe> to embed interactive maps.
Example:
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.8354345094144!2d144.95592831531995!3d-37.817209979751664!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f11fd81%3A0xf5777dd!2sMelbourne!5e0!3m2!1sen!2sau!4v1599637071237!5m2!1sen!2sau" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
In this case, the src attribute holds an URL to the Google Maps embed. The size of the embedded map is determined by width and height attributes.
Tips:
- Use Google Maps’ “Share” facility to get an exact embed code for any location.
- Try zoom level by changing the parameters of the URL
10.3 Embedding Content with iframe
The <iframe> tag comes from the phrase “inline frame.” It is used in order to include content from other pages into a given webpage. As you’ve already seen with regards to YouTube videos and Google Maps, the <iframe> is much more of a flexible tool than that because it can be used to embed many types of content including other sites and even documents.
Example:
<iframe src="https://www.example.com" width="800" height="600" title="Example Website"></iframe>
This embeds another page (https://www.example.com) into your page. The content embedded works like a window to that site, but your page stays in control of the layout.
Security Note:
- Always ensure you make safe use of to embed external content because it poses a potential threat, such as cross-site scripting (XSS).</p>
10.4 Adding Social Media Widgets to Your Website
With social media widgets, users can interact with your content directly on your page. Using their user-friendly embed codes, users can embed feeds from Twitter or posts from Instagram and other interactive content on websites.
Embedding a Tweet:
You can embed a tweet using the code provided by Twitter or alternatively you can use the following procedure,
How to Embed?
<blockquote class="twitter-tweet">
<p lang="en" dir="ltr">Check out our latest product update! <a href="https://twitter.com/yourcompany/status/123456789">March 1, 2024</a></p>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
When an image is embed, Twitter automatically styles and scripts it to look like an actual tweet from its platform.
Embedding Instagram Post:
Similarly, Instagram offers a similar feature through providing a code that can be embedded into a post:
Example:
<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/ABC1234/" data-instgrm-version="14"></blockquote>
<script async defer src="//www.instagram.com/embed.js"></script>
These social media embeds enhance user engagement and make your webpage more interactive.
Activity:
- Embed a Tweet or Instagram post to your page and notice how it adds a visual dimension to the text.
10.5 HTML canvas for Drawing Graphics
The <canvas> is one of those new HTML elements that can be used to draw graphics right within a browser using JavaScript. Shapes, images, animations-in HTML-can be drawn without requiring plug-ins like Flash.
To start using, you must define its width and height inside the tag of HTML:
Example:
<canvas id="myCanvas" width="400" height="300"></canvas>
Then, you use JavaScript to draw on the canvas:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// Drawing a rectangle
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 100);
This will result in drawing a red rectangle on the canvas. This code can expand further into much more complex graphics and animations by adding more JavaScript functions.
Use Cases of canvas:
- Game development
- Data visualization (for instance, charts and graphs)
- Interactive art and animations
Quizz Time:
Conclusion
Multimedia and embedded content make websites more lifelike and offer content very feature-rich that capture users' attention and encourages interaction. In this chapter we have explored:
- How to embed videos from YouTube and Google Maps.
- How diverse the <iframe> element can be using different types of embedding.
- How to include widgets with social media to integrate dynamic content from accounts on platforms such as Twitter and Instagram.
- Using the <canvas> element in HTML to draw graphics directly onto your web page.
Some of the important techniques for creating dynamic and interesting websites involve knowledge of embedded multimedia. With such knowledge, you would be in a better position to develop rich, engaging, and interactive activities for users.
Activity:
- Embed a YouTube video, a Google Map, and a Tweet within one webpage.
- Try using the HTML 5 <canvas> element to draw simple shapes and designs. Add a bit of JavaScript animations to give it some engagement.