Basic Blogging Checklist: Embedding Videos and Maps in Blog Posts (Mobile Friendly)

Basic Blogging Checklist: Embedding Videos and Maps in Blog Posts (Mobile Friendly)

posted in: Blogging, Our Work, Writing | 0 | This post may contain referral links. See privacy policy for more.

Last week, we discussed how we use content and images on our blog. This week, we will show you how we embed videos and maps. This is post is primarily directed to WordPress users.

Understanding iframe

“iframe” stands for inline frame. According to WhatIs.com, an iframe is “an HTML document embedded inside another HTML document on a website.” Now “why would this be helpful?” you may be asking. 

WhatIs.com has an answer for that also: “A web designer can change an IFrame’s content without requiring the user to reload the surrounding page.” For example, you can watch multiple youtube videos on the same webpage.

Obtaining the Embed Code

For YouTube Videos, go to the Share button under the video and click Embed. Copy the iframe code.

How to Embed a YouTube Video

For Google Maps, it is a bit more hidden.

Embed Google Maps Step 1 Click Menu

First click the menu, located to the left of the search bar.

 

Embed Google Maps Step 2 Click Share

Then click Share or embed map.

Embed Google Maps Step 1 Copy Embed Code

Set the zoom to your perfect setting and switch to Earth or Map view. Once the appearance is to your liking, copy the iframe code.

Making it Mobile Friendly

Making content responsive (aka mobile friendly) can be a real head scratcher. Fortunately, the folks at SmashingMagazine.com have a solution that we find works perfectly. You can read about the whys and wherefores on their site here.

Add a div class to iframe content

First, in text editor mode, you want to wrap your iframe content in <div> with the class set to video-container.

Add CSS content for div class

Next, you want to add some custom css. Get the code above at SmashingMagazine.com. If your theme doesn’t have a custom css section, you can install a plugin like Simple Custom CSS.

The Final Result!

 

 

Share this post!

How to embed videos and maps in a blog post

Follow Us

Z.Y. DOYLE

Howdy! We are a two-sister writing team in sunny Arizona. We are authors, photographers, and Woof Trekkers. Read our blog for posts about food, positivity, pets, self-publishing, and travel.
Follow Us

Latest posts by Z.Y. DOYLE (see all)

Share this!
Comments are closed.