Alright so I'm having trouble getting the embed youtube-clip to be % width/height. Trying to make a website that looks the same no matter what resolution you have.
How do I make them use the % instead of px?
<table id="tableframsida" align="center" border="0" height="80%">
<tr>
<td height="100%">
<h2>HeatoN explains how to think when you're creating tactics</h2>
</td>
<td height="100%">
<iframe width="100%" height="100%" src="http://www.youtube.com/embed/UTdFMBReXBw" frameborder="0" allowfullscreen></iframe>
</table>
With so few informations about the layout you'd want, I propose you this HTML / CSS you can adjust to fit your requirement.
I removed the width=100% and height=100% of the iframe, which are the default values for iframes
I changed the table display for a classic wrapping div + elements and a display:inline-block.
HTML
<div class="videoWrapper">
<h2>HeatoN explains how to think when you're creating tactics</h2>
<iframe src="http://www.youtube.com/embed/UTdFMBReXBw" frameborder="0" allowfullscreen></iframe>
</div>
CSS
.videoWrapper{
height:600px;
}
.videoWrapper h2, .videoWrapper iframe{
display:inline-block;
}
.videoWrapper h2{
word-wrap:;
width:25%;
}
.videoWrapper iframe{
width:70%;
}
Fiddle
Related
i am using angular.js and putting ifram in my table row of html, its not appearing in the center of page.
i am using this code
<tr>
<td>
<iframe id="myIframe"
[src]="'https://maps.google.com/maps?q='+rfq.latitude+','+rfq.longitude+'&hl=es;z=18&output=embed' | safe"
width="100%"
height="450"
frameborder="0"
></iframe>
</td>
</tr>
how can i place this map to center of page with full weight
I don't know how to add css in angular but you can simply use this position: absolute to center the iframe.
you can also remove height and width from iframe
Edited code
I have seen your code, what you were doing wrong that you were adding width and height and other css properties ouside the style tag. If you look at my code you'll understand.
<iframe id="myIframe" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d30704255.110777132!2d64.3828365886956!3d20.047174681973626!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30635ff06b92b791%3A0xd78c4fa1854213a6!2sIndia!5e0!3m2!1sen!2sin!4v1604400347555!5m2!1sen!2sin" width="600" height="450" frameborder="0" style="width: 100%; position: absolute; height: 300px;left: 50%;top: 50%;transform: translate(-50%,-50%)" allowfullscreen="" aria-hidden="false" tabindex="0" ></iframe>
Here's the link of codesandbox
Let me know if it doesn't work for you.
I'm creating a simple web page using only HTML (so I don't use CSS or anything else) and I want to create an iframe in the horizontal center of the page. This is the code
<body>
<iframe height="200" width="800" src="http://www...." align="center" frameborder="0"></iframe>
<!other stuff>
</body>
If the alignment is setted as "right", the iframe appears on the right, but if it's setted as "center" (as it is in the code) it appears on the left, as it happens when the alignment is "left".
Thanks to everyone who can help.
Include the iframe in a div with align="center" like this:
<body>
<div align="center">
<iframe height="200" width="800" src="http://www...." frameborder="0"></iframe>
</div>
</body>
Check on this JSFiddle that it is on the center.
UPDATE
As Quentin has mentioned in his comment bellow, the use of align="center" is obsolete in HTML5. As an alternative you can use style="text-align:center" like this:
<div style="text-align:center">
<iframe height="200" width="200" src="http://www...." frameborder="1"></iframe>
</div>
Check this updated JSFiddle.
here is an working code using flex
<body style="display:flex;position:relative;margin:0; justify-content: center;">
<iframe height="200" width="200" src="https://www.w3schools.com" frameborder="0" ></iframe>
</body>
Fiddle link
I have an I frame inside of a <td> element. I'd like to dynamically scale the iframe so that it takes up 33% of the screen width (and automatically fixes the height).
When I try this:
<iframe src="google drive presentation url" frameborder="0" width="33vw" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
It only takes up 33% of the <td> element (which also has text in it).
Also, I tried using width="33%" but that didn't work either.
How can I fix this?
you must give width using CSS instead.
body {
margin: 0
}
td {
width: 33.3%;
background: red
}
iframe {
width: 100%
}
<table>
<tr>
<td>
<iframe src="google drive presentation url" frameborder="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
</td>
<td>
Foo Bar
</td>
<td>
Foo Bar
</td>
</tr>
</table>
Are you supporting anything older than IE9? Can you use vw units?
Here is a JSFiddle of the (rough) idea. The <div> elements on the bottom are for measurement/comparison.
I used the widget API from soundcloud and embedded the widget into my HTML file but I am having trouble center aligning it.
The HTML code is
<iframe width="50%" height="300" scrolling="no" frameborder="no" align="middle" src="musiclink&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
As you can see I tried align="middle" but it did not work.
I tried align="left" and that worked but for some reason align="middle" did not work. Furthermore, I went into the API code and tried to change the CSS styling to
.widget {
background-position: center center;
}
But that did not work either
What am I doing wrong/missing?
You can surround the iframe with a div:
<div style='text-align:center'>
<iframe width="50%" height="300" scrolling="no" frameborder="no" align="center" src="musiclink&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
middle is a value for valign.
Use align="center" instead.
More on valign: Here.
More on align: Here
put a div around the iframe and set the left and right margin to auto. it will center this div inside of it's container.
<div style='margin:0 auto;'>
<iframe width="50%" height="300" scrolling="no" frameborder="no" align="center" src="musiclink&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
i need to create CSS divs.
one up the top for the header (full width)
one on the left (180px) for the vertical menu
and one to the right for the main content
the menu on the left will be an iframe and then the one on the right will also be an iframe.
I currently have this code:
<style type="text/css">
body,html {
height:98%;
}
#top-bar {
width:100%;
padding:10px 10px 10px 10px;
margin:0 0 10px 0;
border-bottom:solid 1px #000000;
top:0;
left:0;
}
#left-bar {
width:170px;
display:inline;
float:left;
position:fixed;
z-index:999;
}
#right-bar {
margin-left:180px;
width:auto;
display:inline;
}
#space {
width:100px;
height:120px;
}
</style>
<table width="100%" border="0" cellspacing="10" cellpadding="10" style="position:fixed;z-index:999;top:0;left:0;background-color:#fff">
<tr>
<td><img src="http://www.integradigital.co.uk/images/company/logo.png" width="282" height="41" /></td>
<td align="right">Hello <?php echo $_SESSION["forename"]; ?> | Logout</td>
</tr>
<tr>
<td colspan="2"><hr /></td>
</tr>
</table>
<div id="space"></div>
<div id="left-bar"><iframe src="header.php" width="180px" height="480px" frameborder="0" scrolling="auto"></iframe></div>
<div id="right-bar">
<iframe name="rightiframe" src="dash.php" width="100%" height="480px" frameborder="0" scrolling="auto"></iframe>
</div>
but the right content seems to be going under the left menu
i need the top header (currently in the table) to not move when scrolling and the same for the left menu bar and needs to be % so it can all fit on different size screens.
anyone have any ideas what i can do with it?
To start with, move the styles into a separate style sheet and link to this from the <head> of the page. Don't use the <style> element because it's a pain to maintain and results in duplication across pages. The <style> element should not be in the <body> of the page.
Also, don't use tables for layout. It's not semantic.
There's no point making a floated element inline. It won't be inline. If those inline elements weren't floated, the width's you've specified wouldn't be applied. Also, don't use the style attribute on elements - use CSS.
These suggestions probably won't fix your specific issue, but everything's a bit of a mess at the moment, so I think you've got bigger issues to fix at this point...
Try out with the changes below,
<div id="left-bar">
<iframe src="image.png" width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>
</div>
<div id="right-bar">
<iframe name="rightiframe" src="image.png" width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>
</div>
#left-bar {
width: 20%;
........
}
#right-bar {
width: 80%;
.......
}
Note: Never use tables for the alignment of contents in a page. Always use divs with the css defined in .css file with the proper 'class' property defined for div tags.