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.
“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.
For Google Maps, it is a bit more hidden.
First click the menu, located to the left of the search bar.
Then click Share or embed map.
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.
First, in text editor mode, you want to wrap your iframe content in <div> with the class set to video-container.
The Final Result!
Share this post!