How to embed a YouTube video or Google Map into your webpage

Categories
»
» All Pages
Published
04th February 2023

This I.T.ZAP Webmaster Video demonstrates how you can embed a YouTube Video or Google Map into your webpage and then apply a mobile friendly responsive CSS style to make the video automatically resize to fit the website visitor's screen width.

Please note that the advice given here is only relevant to websites built for clients of I.T.ZAP Website Design Works.

Key Steps

Watch on YouTube to find Chapter Marks in the video description. Click any Timestamp below to jump to that topic.

00:00 - Copy the YouTube Video Embed <iframe> Code Snippet.

01:09 - View your webpage Source Code, then Paste the YouTube <iframe> Code Snippet into your webpage.

03:25 - Exit Source Code view, Click on the <iframe>, Open the Styles Menu and select either p.video or p.video100

04:24 - If desired, add a Caption underneith the Video, select that Caption paragraph, open Styles Menu and select p.photo-caption

05:08 - Embed a Google Map using the same procedure.

 

« Previous | Next »

More related pages …

Add a MagicSlideshow photo presentation to your webpage
Add a MagicSlideshow photo presentation to your webpage
A picture is worth a thousand words. And that is most certainly true on the internet. Giving your webpage visitors a really good look at what is being offered for sale, or the topic of an article, ...
0
Promote your latest and most important website pages on the Home page
Promote your latest and most important website pages on the Home page
Watch how to promote your latest and most important website pages on your Home page using the “Recommended” feature in the Ecommerce Templates content management system.
0
How to insert a photo into the body of your webpage
How to insert a photo into the body of your webpage
This Webmaster Video demonstrates how you can insert an image directly into the body of a webpage and then, if desired, align your photo to the centre of the page.
0