video -Tag in fluid grid

I'm building a site using fluid grids in Dreamweaver. When adding a video with the HTML5-video-Tag an the video.js-Player, it isn't possible to get the video automatically resizing when changing the window size. Adding <video style="max-width: 100%; height: auto;" doesn't work, several javascripts won't work too.
So how it's possible to get a fluid video size? (using dreamweaver cs6)

This works with embedded YouTube videos.
CSS:
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border:none;
HTML:
<div id="FluidGridDiv1">
     <div class="video-container">
     
     <iframe width="560" height="315" src="http://www.youtube.com/embed/v1uyQZNg2vE" allowfullscreen></iframe>
     </div>
</div>
Nancy O.

Similar Messages

Can you add video to a fluid grid project in CS6

Hi Again;
I'm thinking about the upgrade to CS6 to help with my video problem in CS 5.5 and was wondering if you can add video to a fluid grid web project. From what I watched on the web, it looks like everything is a one page web site with links to an area on the index page. I need to get video into my website as examples of what I do and the fluid grid looks great. I'm also guessing that I could put a link to a video site like Vimeo.
Thanks for your help.
Tom

was wondering if you can add video to a fluid grid web project.
Sure. You can drop in your own HTML5 videos or embed Vimeo, YouTube, etc...
From what I watched on the web, it looks like everything is a one page web site with links to an area on the index page.
Not true. jQuery Mobile and Fluid Grid Layouts differ quite a bit, don't get them confused.
JQuery Mobile is essentially a one page web site for mobile devices.
With Fluid Grid Layouts however, you can make a responsive web site layout in a few minutes and then SaveAs Template. Use File > New page from Template to create the rest of your site pages. Or, you can use jQuery Tabbed Panels inside your Fluid Grid Layouts. It's entirely up to you.
Nancy O.

Is it possible to use HTML5 tags within fluid grid layouts?

Hello,
I want to build my future websites with fluid grid layouts and Dreamweaver CS6 but I don't find any help by searching the internet how I could use the HTML5 tags like "header" "nav" "footer" etc. within the fluid grid layouts automaticly. If I do anything manually it's more error-prone. Or is just the best way to stay with the "normal" div-tags???
Thank you in advance, best regards ... Björn

Those tags are equal to a normal DIV and can be used just the same, they are just not built into CS6.
Mylenium

How do I center an image inside a div tag using fluid grid layout?

where do I find and what do i use the image properties position when using the fluid grid layout. I'd like to center the image in the mobile page versus th left position in the desktop.

This is what my css codes looks like where the image is in the div tag:
#logo_links {
    clear: both;
    float: left;
    margin-left: 0;
    width: 32.2033%;
    display: block;
This is the html code where the image is:
</div>
    <div id="logo_links">
      <div align="center">
        <p><img src="../fluidgrid/images/3_7x2logo.jpg" alt="" width="236" height="110" align="left"></p>
      </div>
    </div>
I'm going to need more detail where to insert the suggested code as I am a newby!
Thanks

DW Fluid Grid Calculating wrong ?

Seems to me that DW it's calculating the div and margin sizes wrong.
The Logo and Login css are identical, and Logo and Login each sum up more than each 50%, that then creates too much space requirement as in the picture.
Is there a setting in DW that takes care of this calc to be correct ?
Maybe someone from Adobe can assist on how the fluid grid feature is to be used so that it works as displayed in the tutorial video for the fluid grid, there the problem does not occur.
Regards,
Frank
* I also had posted the problem here, with some preliminary steps

I think you are missing the point. If you have 3 columns to fit in one line then mathematically you can't have 3 equal columns because 100% cannot be divided equally. Also, you need to allow for other items like borders, paddings and margins.
Having said this, you are very rigid with your number of columns to start with. The default is 10 for desktop, which you can change to 12 (according to the tutorials); but you can also change it to 15. I started with 15 columns and adjusting the columns one by one until I get this picture:
You can see that 2 rows of 3 columns have fitted quite well. Also, you need to take into account that some columns will always be wider than others. For example, the content of the page might be in a wider column; but it you are designing for newspapers then you might want to have equal narrow columns.
You need to plan in advance what your site will look like and this means you need to draw the pictures even with pen and paper will do for this exercise.
I hope you get the idea. Flexibility is the key word here and don't get bogged down to 12 columns (rigidly) divided into 3 columns times 4 because that is not web designing. Also, the default for gutter is 25% of column width but this can be changed to just 10% to suit your design or even 15% or whatever number you want.
You just need to try different figures until you get it right. Don't forget you are working in WYSIWYG window for this page layout. When the page is designed, you will inevitably need to fine-tune your code manually to make it look right.
Good luck.

Repositioning DIVs in a DW6 fluid grid layout

I've followed James Williamson's video tutorial on fluid grid layouts http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/ and have created something similar.
Williamson gives his DIVs fairly standard ID names. He starts with "header", ends with "footer" and places three DIVs in between: "article", "interview" and "artwork" (around 6:20 in the video).
The desktop layout is a standard three column layout with a header and footer while in the mobile layout all the divs stack up one on top of the other.
In Williamson's tablet layout, he adjusts the width of the DIVs so two site below the header ("article" and "interview") and he makes the third ("artwork") span the full width (he shows the three layouts in a browser from 15.00 to 15.20 in the video).
What I would like to do in the tablet layout is have the third column ("artwork") sits below "article" while the middle div, "interview" (which in my case is taller, due to having more content) sits to the right of them both.
Is this possible using DW6's fluid layout grid, or would I have to create the layout manually from scratch?

eddieduggan wrote:
What I would like to do in the tablet layout is have the third column ("artwork") sits below "article" while the middle div, "interview" (which in my case is taller, due to having more content) sits to the right of them both.
Is this possible using DW6's fluid layout grid, or would I have to create the layout manually from scratch?
No. The way that Dreamweaver's Fluid Grid Layouts work is by floating all divs to the left. New rows are created by setting the clear property to left. As a result, you cannot have a div on the right that spans the height of multiple divs on the left.
The divs must be displayed in rows in the same order as they appear in the underlying HTML. To get two divs on the left alongside a taller one on the right, you would need to wrap the left-hand divs in an outer div. The outer div can be snapped to the grid, but not the inner ones.
As Nancy says, failing miserably with the Fluid Grid Layout feature is much easier than succeeding. It reminds me of Dreamweaver's earlier love affair with "layers" (absolutely positioned divs) -- well intentioned, but fatally flawed.

The html5 tags nav in the broilerplate.css file - fluid grid

Ok. I am working with the fluid grid system in DW CS6.
in the broiler plate.css file i see the below code which seems to control the styling for the listed html 5 elements.
HTML5 display definitions
   ========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
/* =============================================================================
   Base
   ========================================================================== */
why did adobe set the nav id to display as a block element.
this is causing me issues with using the above tags.
My navigation bars name is nav. I attempted to create another css rule with the display set to INLINE for my menu.
The boiler plate code is overwriting my rule. Why? What is the best way to label my divs. I was tring to go HTML 5 but fluid grid already has some rules in place. Can i modify that without problems? what is the best thing to do. Not label my divs with the HTML5 labels?
why are all html5 tags set up to display that way. How are you supposed to have individual control? without breaking the fluid grids factory helper rules?

Thanks for those charts. I am building the site for both myself and my visitors. After looking at your chart I think 90% is good enough for me. My old website that I am rebuilding used framed pages and front page to build it.   I am making my layout so that IF i find that the fixed nav box is too Dicey I will just pull it off the site.
I am not suse which browser dreamweaver has built in. I moved into a new windows 8 computer with CS6 at the same time. I have not downloaded any browsers yet. I was just building this based on the newest stuff released. I am far from testing it out and should have gotten some done by now. AS of right now I have 140 hours in building my new layout and learning CSS coding. I have not uploaded yet to a URL so I will need to get back to you when I do. The little bugs keep setting me back to zero. The layout looked like it all snapped to the grid. My layout divs were 12 column with 4 divs approx 200 px 400px 300px and 300px everything snapped to and looked fine. When I started adding my PS images and content to my divs the 4th div fell back down a row in the view. I then click the arrow to move it down a row which it did then I tried to move it back up. It would not go. I have boxes with borders, radius corners, and dropped shadows on the containing box. I looked at it and starting thinking the CSS styles made it wider than the fluid grid would allow. So i then removed the styles and it is still stuck a row below where it should be.
Futher down my page I have 4 more rows with 4 divs in each row. The last 4 all drop down so that it is totaly different than what I a laid out. It is weird because my div is three colums wide. I have the last three colums open on the lay out but it will not move up and it seems like the margins are tight or the gutter is wrong. I am not sure.

How to Include More Than One Font and Font Color Within a Fluid Grid Div Tag?

Using CSS code, I can make all the words within a fluid grid div tag the same font, font size, and font color, but how do I make a few of the words different?

You can style the basic text and heading selectors with CSS:
p { }
h1 { }
h2 { }
h3 { }
h4 { }
etc...
And you can make classes:
.red {color:red}
.highlight {background-color:yellow}
Then apply classes to your text or sections of it using the HTML properties panel.
<div>
     <p>This is a default paragraph style.</p>
     <p class="red">This is red.</p>
     <p class="highlight">This is highlighted.</p>
     <p>Default style with <span class="red highlight">red, highlighted text</span> and normal text.</p>
</div>
Incidentally, this will work in any layout.
How to Develop with CSS?
http://phrogz.net/css/HowToDevelopWithCSS.html
Nancy O.

Insert Fluid grid layout div tag pastes CSS

I am trying to create a new fluid grid layout. I am able to insert 2 new layout divs, but after that, the "Insert Fluid grid layout div tag" fails. I am in "split" display, and the code view shows CSS instead of the HTML, and the design view shows a page of CSS code.
Control-Z always backs me up to the proper display of code and design, but the CSS file does not contain the definitions for the newly-inserted DIV.
Before insert:
After insert:

Yes. I created a new site, named as you see, for the files created as I learn the new features in CS6.
The problem I am seeing is 100% reproducable. The 1st 2 layout divs are inserted correctly, then all after that fail. After the 2nd screen shot above, a single ^Z will restore the code & display panes. I have learned that I can quickly switch into editing the CSS file, paste in the definitions for the new div (a pain, but do-able), then I can do all of the other editing, resizing, etc.
One thing I have not tried, but will, is to remove my custom key-mapping and try this in a standard workspace.

Why I am not able to see Fluid Grid Layout Div tag

Why I am not seeing Fluid Grid Layout Div tag In the Insert Layout menu

DW CC changed the panels. If you're working in FGLayouts, DW intuitively inserts the correct Div for you.
Nancy O.

Help centering background video in fluid grid layout inside div

Hopefully this all makes sense. I am trying to center the background video (the animation on the website towards the bottom)... I have tried all sorts of things to try and center this. If it can't be done, it can't be done. The banner on top works as should. If all else fails I will just not use a fluid grid page and that will be that. I self taught myself Adobe After Effects to make that animation (took me a month and 1/2) and I have self taught myself Dreamweaver.. coming from Frontpage and Expression Web.
Here is the website (thank you in advance for your input):
http://a1customcomputers.com/Web%20Development/A1CC/Main.html
I just tested it and it's not playing how it should.. I'll figure that out later but where it says "Enter", that is what I need centered. Thanks
My html so far:
<!doctype html>




<html class="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet"/>
<link href="assets/style.css" rel="stylesheet"/>
<script src="respond.min.js"></script>
<script type="text/javascript" src="assets/jquery-1.5.1.js"></script>
<script type="text/javascript" src="jquery.videoBG.js"></script>
<script type="text/javascript" src="assets/script.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="div1" class="fluid">
<div align="center"><img src="A1_Banner.jpg" /></div>
</div>
<p> </p>
<p> </p>
<div id="div2" class="fluid"></div>
</div>
</body>
</html>
my style.css so far:
@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/
img, object, embed, video {
max-width: 90%;
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
Dreamweaver Fluid Grid Properties
dw-num-cols-mobile: 5;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 12;
dw-gutter-percentage: 15;
Inspiration from "Responsive Web Design" by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design
and Golden Grid System by Joni Korpi
http://goldengridsystem.com/
.fluid {
clear: none;
width: 400px;
float: left;
display: block;
padding-left: auto;
padding-right: auto;
.fluidList {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;
/* Mobile Layout: 480px and below. */
.gridContainer {
width: 100%;
clear: none;
float: none;
height: 100%;
margin-top: 20px;
padding-left: 0.7851px;
padding-right: .7851px;
#div1 {
width: 100%;
#div2 {
width: 400px;
height: 400px;
text-align: left;
margin-left: auto;
margin-right: auto;
.zeroMargin_mobile {
margin-left: 0;
.hide_mobile {
display: none;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 100%;
padding-left: 0.7581%;
padding-right: 0.7581%;
clear: none;
float: none;
margin-top: 20px;
height: 100%;
#div1 {
width: 100%;
#div2 {
width: 400px;
height: 400px;
text-align: left;
margin-left: auto;
margin-right: auto;
.hide_tablet {
display: none;
.zeroMargin_tablet {
margin-left: 0;
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 100%;
margin-top: 20px;
clear: none;
float: none;
padding-left: 0.7581%;
padding-right: 0.7581%;
height: 100%;
#div1 {
width: 100%;
margin-bottom: 13%;
#div2 {
width: 400px;
margin: 0 auto;
.zeroMargin_desktop {
margin-left: 0;
.hide_desktop {
display: none;
/* DEMOS */
#div2 {
width: 400px;
margin: 0 auto;

Not trying to argue with you and I know you are only trying to help and I know that you know ALOT more about this than I do.. you do... I don't know if background was the correct "place" to call it.. but nevertheless.. what I beleive it is, is in the background.. and maybe that is part of the problem. It is supposed to be called from a JQuery plugin, and where I have it now is in a "div [div2]" in the "gridcontainer". It was working and my latest attempts it was working great.. but wasn't centered. But I've changed a bunch of code around lately and so that is why it is not working right now... The "Enter" that you see on the link I provided is the "poster". When I get a chance I will work on it and get the animation working again.. or back to normal.. just not centered. At first I was thinking "centered vertically".. and so for like a week, maybe longer.. everthing that I was searching for and trying was for "vertically center a div".. then it hit me.. you jacka$$.. you want to horizontally center it... Haha! Again, thank you for your input.

Green highlight when working with Fluid Grid Layout Div tags

What does the green highlight mean when working in Live view of a Fluid Grid Layout using Fluid Grid Layout Div Tags? Sometimes they show up, but sometimes they don't. I think it has something to do with the width setting but I can't figure out what the rule is or what the highlight indicates.
Dreamweaver CS6
Mac OSX 10.8.2
THANK YOU!!

Brian McNay wrote:
the green highlight sometimes disappears when modifying the width property of the div. My question is what does this signify?
If you change the width of a div manually in Code view or in the CSS styles panel, Dreamweaver ceases to treat it as a fluid grid layout div, and the green highlighting disappears.
To be treated as a fluid grid layout div, the width must be adjusted by dragging the handles in Design view. Dreamweaver snaps fluid grid layout divs to the grid that is defined when you first create the page, and it calculates the width and margins to many decimal places. If the width and/or margin doesn't match the grid dimensions, the highlighting disappears, and the div is treated as any other div.
It's not a bug, nor are fluid grid layout divs any different from normal ones. The idea of the grid and the highlighting is to allow you to create a responsive layout according to a hypothetical grid. Once you've created the basic structure, it's best to turn off the visual guides anyway.
Personally, I think that the implementation of fluid grid layouts in Dreamweaver CS6 leaves a lot to be desired. The basic idea is good, but it's difficult to use if you don't have a solid understanding of CSS.

What must i do to get Insert Fluid Grid Layout Div Tag on dreamweaver?

Why an i not able to get the Insert Fluid Grid Layout Div Tag on dreamweaver?
I am using Creative Cloud

Hi Leroy, this post in the Adobe Dreamweaver Team Blog may assist you with the updates to Dreamweaver: http://blogs.adobe.com/dreamweaver/2013/02/updated-fluid-grids-in-dreamweaver.html
Let me know if you still require assistance.

Fluid Grid Layout- HTML5 video buttons become gray squares Android

I am attempting to use Fluid Grid layouts for a simple smartphone/tablet acessible video page. I am in Dreamweaver CS6 Cloud (updated). The buttons for play and full screen mode are shown as gray squares on my Android phone. It works fine in other browsers (OS:Windows 7, Chrome, FireFox and IE. I have not tested iOS or iPhones). I spent a day trying variations trying to get it to work properly on the Android and finally built a whole new HTML5 (non Fluid Grid) and it works. But that has issues with formatting, where comes in small and has text not filling the page for Android. I am trying to avoid people having to zoom in and out to see the page. The Fluid Grid brings the page in the way that I want it. My guess is that the Fluid Grid boilerplate or the respond.min.js is causing the conflict. As this is a touchy new venture into Adaptive Design I have left these files alone.
Here is the fluid grid (stripped of formatting) http://www.oha-edu.org/Video/v1.html
Here is the HTML5 video page where the buttons show up. http://www.oha-edu.org/Video/2.html
Dumping my Droid Razr Maxx (Android Version 4.04, System version 6.16.211.xt912.Verizon.en.US) is not a solution. I wish to make this work for as many devices as possible.

How To Center Fluid Grid Layout Div Tag

Hello I am remaking my webiste and am new to fluid grid layouts. I am trying to center the images you will see in my website into the middle.
I can use pixels to center it but it will not be centered for all screen resolutions. What do I have to change in the css rule defintion to center it all out or simply move it to the side?
WEBISTE: http://auto-republic.com
CODE: http://pastebin.com/LujvaGek
Thanks in advance!

In HTML Code View, line 53 - 56, replace what you have now with this:
<div class="gridContainer clearfix">
     <div id="LayoutDiv1">
     <p>LAYOUTDIV1 CONTENT GOES HERE<p>
     </div>
     <div id="LayoutDiv2">
     <p>LAYOUTDIV2 CONTENT GOES HERE</p>
     <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('wrecker','','images/wreckerservice/wreckerservice2.gif',1)"><img id="wrecker" src="images/wreckerservice/wreckerservice2.gif"></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('facebook','','images/facebook/facebook2.gif',1)"><img id="facebook" src="http://auto-republic.com/images/facebook/facebook1.gif"></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('askaquestion','','images/askusaquestion/askaquestion2.gif',1)"><img id="askaquestion" src="http://auto-republic.com/images/askusaquestion/askaquestion1.gif"></a>
     </div>
Nancy O.

video -Tag in fluid grid

Similar Messages

Maybe you are looking for