Buy LBM Now | LBM Home | User Guide | LBM Components | Tutorials
With Layout Builder Magic you'll be able to turn out modern, responsive page layouts like a pro, without coding, and without having to learn a massively complex CSS framework. LBM is the little CSS framework that runs like a giant, time after time. There has never been a page layout tool like this for Dreamweaver... ever.
The Layout Builder Components add-on for Layout Builder Magic includes modules that automate the process of adding a responsive video or Google map to your page. Sometimes you'll need to customize the aspect ratio of your video for an older flick, shot in a 4:3 aspect ratio... instead of an HD aspect ratio. Of course, there are also times when you might want to make your map shorter to fit comfortably in your layout. This tutorial will show you how.
We're going to embed a little CSS on the head of your page. This way, we will not affect other pages. Make a style tag in the head of your document. Locate the closing Head tag and make a new line just above it:
Make a blank line above the closing </head> tag, and add a style tag to the blank line:
<style type="text/css">
</style>
</head>
If you are using a Dreamweaver Template, add the style tag inside your page's editable head region:
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
</style>
<!-- InstanceEndEditable -->
</head>
Place these 2 rules between the opening and closing <style> tags:
<style type="text/css">
.lbm-video-wrapper {padding-bottom: 56.25%;}
.lbm-map-wrapper {padding-bottom: 100%;}
</style>
We're simply going to edit the percentage value for the padding-bottom property to match the default aspect ratio of your video or map. For a video, edit the value in the .lbm-video-wrapper rule. For a map, edit the value in the .lbm-map-wrapper rule.
Let's look at typical video and map iFrame tags...
<iframe width="800" height="600" src="https://www.youtube.com/embed/G_7hQRnKTGI?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
To get the aspect ratio percentage, Divide the height by the width and multiply the result by 100:
600/800 = .75
.75 x 100 = 75.00
In this case, the aspect ratio is 75%
Edit the padding value in the lbm-video-wrapper rule to 75%:
.lbm-video-wrapper {padding-bottom: 75%;}
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12..." width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
To get the aspect ratio percentage, Divide the height by the width and multiply the result by 100:
450/600 = .75
.75 x 100 = 75.00
In this case, the aspect ratio is 75%
Edit the padding value in the lbm-map-wrapper rule to 75%:
.lbm-map-wrapper {padding-bottom: 75%;}
That's it!