This is code
<iframe align="center" style="width:100%; max-width:550px; height:100%;" src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" frameborder="yes" scrolling="yes" name="myIframe" id="myIframe"> </iframe>
iframe working fine using web browser. But not displaying iframe in mobile browser. Have any alternat solution for mobile view?
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 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>
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
I need some compatibility help. My website looks different in browsers. Chrome/firefox, etc. looks right but IE is messed up. Take a look at: http://southwestarkansasradio.com/joomla
I'm using Joomla 2.5. The search box is moved to the left and my on air box script does not work in IE. Code is below, can you help? thanks.
<table border="0">
<tr>
<th>
<center><img style="float: left;"
src="http://www.southwestarkansasradio.com/images/onair995.jpg" alt="" height="35"
width="316" /><br><img
src="http://www.southwestarkansasradio.com/images/playerbackground.jpg" width="316"
height="216" alt="" border="1"><div id="now playing" style="position: absolute; top:
60px; left: 20px;>
<!--[if IE]>
<iframe src="http://www.southwestarkansasradio.com/NowPlaying.html" name="nowplaying"
style="height:216px" "width:316px" frameborder="0" scrolling="no" border="none"
allowtransparency="true" valign="top" ></iframe>
<![endif]-->
<!--[if !IE]>-->
<iframe src="http://www.southwestarkansasradio.com/NowPlaying.html" name="nowplaying"
style="height:216px" "width:316px" frameborder="0" scrolling="no" border="none"
valign="top" ></iframe>
<!--<![endif]-->
</div></center>
</th></tr></table></div>
That html is really hard to read for such a small piece of code. Using indentation would make it easier for you to spot mistakes. There were a number of things wrong:
the opening div was missing from the snippet
One of the divs "now playing" has a space in the id. One cannot have spaces in HTML IDs.
you should have a trailing slash in the br tag
you haven't closed the css style in the nowplaying div, i.e. you forgot the closing apostophe. This would cause problems.
iframe does not have a valign property
the height and width in the iframes are badly formed
iframes do not have a border property
Something like the following should serve better but without being able to debug on your server it's guesswork. Anyway, as said I've kept it pretty much to your structure and fixed fixed the obvious stuff but there will probably still be some issues when you try it on the site but it will get you closer. I certainly wouldn't do it this way however.
The w3c validator is a handy tool.
<div>
<table border="0">
<tr>
<th>
<center>
<img style="float: left;" src="http://www.southwestarkansasradio.com/images/onair995.jpg" alt="" height="35" width="316" />
<br/>
<img src="http://www.southwestarkansasradio.com/images/playerbackground.jpg" width="316" height="216" alt="" border="1">
<div id="nowplaying" style="position: absolute; top: 60px; left: 20px;">
<!--[if IE]>
<iframe src="http://www.southwestarkansasradio.com/NowPlaying.html" name="nowplaying" height="216px" width="316px" frameborder="0" scrolling="no" allowtransparency="true" ></iframe>
<![endif]-->
<!--[if !IE]>-->
<iframe src="http://www.southwestarkansasradio.com/NowPlaying.html" name="nowplaying" height="216px" width="316px" frameborder="0" scrolling="no" ></iframe>
<!--<![endif]-->
</div>
</center>
</th>
</tr>
</table>
</div>
This is just a hack but to move the search box in IE8 and IE9 (haven't tried IE7) add the following to the head section of your template's index.php. It's just "pushing" the search box over.
<!--[if IE]>
<style type="text/css">
div.topmenu
{
width: 250px !important;
}
div.search
{
margin-left: 30px !important;
}
</style>
<![endif]-->