Embedding YT vid in responsive layout?

Hey DW'ers
This is my first stab at responsive web design so I went with a template. Tweaking the template is along well (more work to be done for sure), but I’m having trouble getting the YouTube vids to embed.
I did a search on these forums using “embedding a video” and” HTML5 video” (the latter was most confusing ). I looked at the w3schools site as well. I also saw Nancy’s link to pickle player, but do I really need that for embedding a YT vid? I’m using CS5 and pretty sure it’s non-cloud since DW keeps prompting me to upgrade.
I have this code from the template designer:
.video-wrapper {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0px;
overflow: hidden; }
.video-wrapper iframe, .video-wrapper object, .video-wrapper embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
I searched the internet and found this:
.youtube-player{
    border: 1px solid #1D740C;
    height: 390px;
    width: 480px;
    padding: 0px;
    margin-left: 25px;
    margin-bottom: 25px;
They both add a box in split (design) view, but when I save it and view it in the browser, all I get are the two lines of iframe text. I have a book on mobile design, but that just says to add the YT iframe snippet – no info on divs or class attributes at all.
What am I missing? The page is http://www.dirtbikes101.com/articlehtmls/articleYTvids.html
Thanks!
Chris

You currently have...
<iframe> width="320" height="180" src="http://www.youtube.com/embed/w7Aqvt3CqSc" frameborder="0"</iframe>
You need to have...
<iframe width="320" height="180" src="http://www.youtube.com/embed/w7Aqvt3CqSc" frameborder="0"></iframe>
And it will work.
EDIT: The main problem is the position of the opening tag's end bracket. You need to move it to the end of the attributes (right after frameborder="0").

Similar Messages

"Use presets for responsive layout" not working in Chrome

I am building a responsive website. I am going to have parts of the website animated using Edge Animate. I will make the animation and then insert it into a div in the responsive website I am building.
The Adobe Edge animation has a width of 100%, so that it resizes according to the area that it occupies the full width of the div no matter how wide that div may be in px.
It is all working fine, but:
I have an image in the Edge animation that is center aligned. It must stay center aligned no matter what width the animation ends up being.
Within Adobe Edge, in Properties, in Position and Size, there is a option where, if you hover your mouse cursor over the top right button a tool tip says "Use presets for responsive layout"
With the image on the stage selected, I can click on the "Use presets for responsive layout" button and then choose "Centre background Image".
It works perfectly in all browsers accept Chrome (even IE is playing ball this time). In chrome the width of the image stretches out as the div stretches out..
The "Centre background Image" setting says that it won't scale the image. But in Chrome it does.
What can I do to "tell" Edge Animate to center the image but not scale it in the Chrome browser?
I can see that in the image properties it is set to Background image x axis and y axis 50%. And the width is set to pixels. But in Chrome, the image stretches.
If you go to http://www.brainstormadvertising.co.uk/demo/services.html you will see what I mean. The circle image is centering BUT stretching in chrome browsers while centering nicely and NOT stretching in other browsers.

Thank you for your reply Josh. But the point of this setting in Edge Animate is that you can set it up that the background image is center aligned and does not scale. Yet it produces code that gives the width as 21.72%.
A little further along I see background-size: 48px; . This is correct.
So all the browers are reading background-size: 48px; as the scale measurement but Chrome is reading the width only, not the background-width. So this "Use presets for responsive layout" works in all browsers except chrome.
I don't know how to change that code after the artwork has been published. I can see the code using Firebug, but where do I change it in my code on my computer before uploading to the server?
I have reported this bug to Adobe.
Please see the attachment. You can see where all the settings are made and where I am getting a problem.

Tables colpsan rowspan vs Div in a responsive layout

Hi all
I am new to web design and was wondering can you use tables in a responsive layout?
All I need is a website layout that you can view in a tablet and PC for I've already have a mobile site
Thanks everybody

Tables are for tabular data only -- spreadsheets and charts. They are not well suited for web page layouts of any kind. Tables pose several challenges in Responsive Web Designs. I try to avoid using them if I possibly can mainly b/c they stop resizing on smaller viewports. Boostrap offers a few ways to present tables responsively -- with collapsed regions and/or horizontal scrollbars.
http://elvery.net/demo/responsive-tables/
Another option might be to create a pseudo-table with Definition Lists.
Pseudo-Tables with Definition Lists - JSFiddle
Nancy O.

Presets for responsive layout

Hi there,
I was doing a tutorial and when arrives the moment to use the presets for responsive layout, the guy on the tutorial has 6 presets and I only have one...
Does anyone know how can I get those presets?
Thanks!

Thats because you have a Stage > Symbol selected.
The tutorial you reference most likely has an image asset selected: which will reveal 6 Layout Presets.
So in your case, if your symbol 'houses' an image you want to apply one of the six Layout Presets, then you need to be in Symbol Edit Mode: simply double click directly onto the Symbol to enter Edit in Place. Then select the image, then choose from the Preset selector.
Hope this helps
Darrell

Responsive layout design

Hello dreamweavers.
I have a question regarding responsive layout which is regarding to dimensions, I see a lot of post on the net with does and don'ts, that's why I'm asking for a
more professional and formal advice. So my question is, if I set up a design page for example 1400 width x 1000 height or 1600 width x 1400 height, would both
dimensions be able to be coded responsive in order to take up all devices? can a web designer make it responsive regardless its layout dimensions ir is there a specific dimension when it comes to responsive layout,
and what would that be?
Thank you.

inquestflash wrote:
Thanks for the information Nancy. Just one more thing Id like to ask. Would setting up as default dimensions the 960 GRID system be ok, and then
the developers can use % for the rest of the devices?
Yes,
Set a container wrapper to max-width: 960px;
Like:
#containerWrapper {
max-width: 960px;
width: 96%;
margin: 0 auto;
Any screen which has the real estate to accommodate 960px width will get that. As the screens real estate gets narrower the design adjusts to suits its width.
Obviously if you just have a one column design that's the job done but you will no doubt have multiple columns so you then need to use media queries to change the properties of the css as the browser window becomes narrower to make the design look nicer.

How to preserve aspect ratio with a responsive layout?

Hi,
I have an image that I need to place in the centre of my stage.
The image is that of a ball and has 400px by 400px size.
I want my animations to be responsive so that the image will scale but still maintain the correct aspect ratio.
Currently if I set pixels to % on width and height, the image stretches.
How do you do this in EA?

Hi Jahandaniel,
I have tested responsive layout and it worked perfectly. Please check the following adobe tv article and let me know your result.
Creating a Responsive Layout | Learn Edge Animate | Adobe TV
Regards,
Devendra

Need help on responsive layout

Hi Folks,
In order to make the SAPUI5 application responsive in nature, we are trying to use ResponsiveFlowLayout/ResponsiveLayout/ResponsiveGridLayout as per the details available in below links. But, in this case the sample code are done via JS view, so how is possible via XML view?
https://sapui5.hana.ondemand.com/sdk/test-resources/sap/ui/layout/demokit/ResponsiveGridLayout.html
https://sapui5.hana.ondemand.com/sdk/test-resources/sap/ui/layout/demokit/ResponsiveLayout.html
https://sapui5.hana.ondemand.com/sdk/test-resources/sap/ui/layout/demokit/ResponsiveFlowLayout.html
Regards,
Diptanu

Hi Diptanu,
Refer to the below sample code:
<mvc:View height="100%" xmlns:core="sap.ui.core" xmlns:form="sap.ui.layout.form" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="my.own.controller" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:c="sap.ui.commons" xmlns:layout="sap.ui.layout">
   <Page title="Layouts">
    <form:SimpleForm id="myForm" minWidth="1024" layout="ResponsiveLayout">
     <form:content>
      <Label text="Name">
       <layoutData>
        <layout:ResponsiveFlowLayoutData weight="12"></layout:ResponsiveFlowLayoutData>
       </layoutData>
      </Label>
      <Input value="Responsive Layouts">
       <layoutData>
        <layout:ResponsiveFlowLayoutData weight="8"></layout:ResponsiveFlowLayoutData>
       </layoutData>
      </Input>
     </form:content>
    </form:SimpleForm>
   </Page>
</mvc:View>
Hope this helps!
Regards,
Anusha

Responsive layout template problem

I created a master page with a responsive layout and then saved as template.
I then went to assets and created "new from template" a new page.
When I save this page as index.htm I get the following error message:
Making this change would require changing code that is locked by a template or a translator. The change will be discarded.
Pressing OK then brings up another error box with the following message:
While executing onLoad, the following JavaScript error(s) occurred:
At line 591 of the file "c:\program files (x86)\Adobe Dreamweaver CS6\Configuration\Commands\dmxUpdateHead.htm":
The object is not currently contained in a document.
My website files being developed are on F: drive so I guess this is something to do with the system files.
USING CS6 / BOOTSTRAP2 / WINDOWS 7
No idea what to do... Welcome any advice.
Thank you in advance for feedback
Terry

You will get this problem because Automatic File Update has been selected. Click the checkbox to unselect and all is well.
The reason is that the Bootsrap extension tries to refresh the association of the necessary files and the template system rejects this because the associations are located in a non-editable area.
The above dialog can be found by clicking Commands->DMXZone Bootsrap Options.

Create a photo montage showing responsive layouts

Hello,
Photoshop forum suggested I move over to the DreamWeaver forum for this. I am a web designer. I'd like to show a thumbnail view of the responsive sites I've created on my own website that shows a particular site (using the actual URL) in a montage of different responsive layouts. It's a common montage. Is there a way to generate this using a URL, some tool or software? I do not want to create a slideshow. I first went to Photoshop because one company told me that's what they used to create this. I'd like to keep it simple and have Googled exhaustively to no avail.

There is an extension for Google Chrome that takes responsive captures.
Webpage Screenshot - Chrome Web Store
Online Service -- you enter your URL and set the breakpoint (viewport size)
Responsive Capture - free full screenshot service
Another online service -- makes various responsive previews to show your clients
deviceponsive.com/
Nancy O.

Why I cannot preview my responsive layout project with captivate 8?

I can not preview my responsive layout project in captivate 8. It just stop on the first page. Can anyone help?

Hi,
Do you get the issue every time you create a responsive project? Can you just crease 2-3 slides with smart shapes and text caption; publish and check if there is still any error?
There are chances that the issue might be with the browser, which browser are you using to preview the content?
Chrome version 36 has similar issues with captivate html5 output. Please find the following workaround if you are using Chrome.
http://blogs.adobe.com/captivate/2014/07/update-on-captivate-html-5-content-playback-issue -in-google-chrome-browser.html

Responsive layouts and expanded form options

I love that paralax scrolling has been added to Muse. Responsive layouts and allowing uploads in forms would be top of my list for upgrades. Appreciate how far this program has come from it's first beta release, keep it up.

Unfortunately there is no feature for creating Formscentral Forms that behave the way DW fluid grid design elements do. Basically Formscentral outputs HTML for one size form only. You can embed this HTML in your DW site and play with the fluid grid settings but as far as Formscentral is concerned you can only specifiy one size form at design time.
Andrew Yarborough

Center responsive layouts in Edge

Hi,
I would like to center a responsive layout, which I have done.
With that code it works, but only when the width of my layout is fix:
$("#Stage").css("margin","auto")
But I want a flexible width, (I am using stage width in % not in px) and then the
code is not working anymore.
I need this flexible width, because I am loading in a container which is positioned on the stage
three different layouts with 320px, 600px and 1200px-width.
yepnope ({
load: "libs/EdgeCommons.js",
callback: function (){
EC.setAdaptiveLayouts(
[320, 600, 1200], sym, "adaptiveContainer"
These layouts I have created in Symbols.
is it possible to center these different layouts/symbols?
Can anyoune help me with that?
Many, many Thanx!!

If you just want to center a div, here is an example how to do it in css:
<!DOCTYPE html>
<html>
<head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
          <title>test</title>
    <style>
    html, body {
        margin: 0px;
        padding: 0px;
        #Stage {
            background-color: #ff0000;
            margin: 0 auto;
            width: 900px;
            height: 200px;
    </style>
</head>
<body>
          <div id="Stage">
          my content here
    </div>
</body>
</html>

Safari IOS7 wont display embeded youtube vids on websites - help!

Hi, anyone else having this issue?
My website has embeded youtube vids in it, but neither safari or chrome will display them after the IOS7 update. First time you land on the page they are there, move away and come back, or refresh, and they vanish, but are still there as you can hear them playing if you click where they were...
David

I have the same problem , sometimes the videos are displayed and sometimes you don't see anything...
I've tried it on all my devices with ios7 ( iPhone 5 , iPad 4 & iPad mini ) and they all have this problem , so this must be a bug in ios7 !!!

How do I get the Function bar to appear in my responsive layout?

Running 11.0.3.268, with the latest hotfix.
When I customize my layout, I see options for a Function bar. (Home button, Print button, Back and Next buttons, etc.) When I generate my output, however, I do not see any of these items. What do I need to do to make these button appear?

Thank you. Apparently my screen resolution was too low for the Function bar to display.
Is it possible to adjust screen dimension break points for the Responsive HTML5 Help layouts? I see the Screen Profiles on the Project Set-up tab, but they seem to be only for Multiscreen HTML5 output.

HTML Responsive Layout for tablet and phone is not showing icons correct on a converted help file

I am using the Responsive HTML Layout in RoboHelp 11. On all of my new help files, the layout works great and my icons are showing appropriately. On all of my old help files that were converted, my icons do not fit within bar for the tablet and phone. I am using the Government Theme (Theme2_Government), but modified the file to have our colors and logos. I exported the .slz file and I am using the same slz file in all of the help files. The only help files that are cutting off the icons are the help files that were converted from previous version of RoboHelp. Any idea why this would happen?

This is from the converted file showing the icons that are cut off in the blue bar.
This one is from a new help file and the icons fit within the blue bar.
The same thing happens the phone layout with the bar at the bottom.

Embedding YT vid in responsive layout?

Similar Messages

Maybe you are looking for