<section class="features section-padding" id="features">
<div class="container">
<div class="row">
<div class="feature-list">
<h3>San Diego</h3>
<p>Departure</p>
<body>
<iframe src="http://flightaware.com/resources/airport/SAN/APD/AIRPORT+DIAGRAM/pdf" width="600" height="700">
<iframe src="https://flightaware.com/resources/airport/KSAN/DP/all/pdf" width="600" height="700">
</body>
<p>Approach</p>
<body>
<iframe src="https://flightaware.com/resources/airport/KSAN/STAR/all/pdf" width="600" height="700">
<iframe src="https://flightaware.com/resources/airport/KSAN/IAP/all/pdf" width="750" height="800">
</body>
</div>
</div>
</div>
</section>
That is what I have at the moment, but it only shows one pdf, the top one. How can I get it to show all the pdfs?
Thanks
First of all, you forgot to close your iframe tags.
The iframe tag is not self closing and should be explicitly closed like the following:
<iframe src="https://www.weather.com" width="600" height="700"></iframe>
(Notice the </iframe> closing tag)
This one worked for me (your original HTML re-worked):
<section class="features section-padding" id="features">
<div class="container">
<div class="row">
<div class="feature-list">
<h3>San Diego</h3>
<p>Departure</p>
<div>
<iframe src="https://www.weather.com" width="600" height="700"></iframe>
<iframe src="https://www.weather.com" width="600" height="700"></iframe>
</div>
<p>Approach</p>
<div>
<iframe src="https://www.weather.com" width="600" height="700"></iframe>
<iframe src="https://www.weather.com" width="750" height="800"></iframe>
</div>
</div>
</div>
</div>
</section>
See it here: https://jsfiddle.net/c55zztbn
If you are still not getting your iframe's src URL's shown, the url you are using might be using a "X-Frame-Options" response header which will prevent the iframe from loading it.
Hope that it helps a bit!
Related
I am attempting to create a single page desktop site using uikit css framework that will contain a bunch of iframes (videos). Works great except whenever the amount of videos exceeds the size of my browser I get a scroll bar. With my current setup, is it possible for me to make all of these iframes fit into the page regardless of browser size?
Here's the code (should work fine locally for anyone who tries it)
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/css/uikit.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit-icons.min.js"></script>
</head>
<body>
<div class="uk-section uk-section-primary uk-padding-remove-vertical">
<nav class="uk-navbar uk-navbar-container uk-navbar-transparent uk-padding-small">
<div class="uk-navbar-left">
</div>
</nav>
</div>
<div class="uk-flex-wrap uk-grid-small uk-child-width-1-3#m uk-child-width-1-2#s uk-flex-center uk-text-center" uk-sortable="handle: .uk-card" uk-grid>
<div>
<div class="uk-card uk-card-default uk-card-hover uk-card-body uk-card-small">
<iframe width="100%" height="30%" src="https://www.youtube.com/embed/Bey4XXJAqS8" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-hover uk-card-body uk-card-small">
<iframe width="100%" height="30%" src="https://www.youtube.com/embed/Bey4XXJAqS8" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-hover uk-card-body uk-card-small">
<iframe width="100%" height="30%" src="https://www.youtube.com/embed/Bey4XXJAqS8" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-hover uk-card-body uk-card-small">
<iframe width="100%" height="30%" src="https://www.youtube.com/embed/Bey4XXJAqS8" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-hover uk-card-body uk-card-small">
<iframe width="100%" height="30%" src="https://www.youtube.com/embed/Bey4XXJAqS8" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</body>
</html>
I solved this by making my own grid since I could not do it with UIKit. It is 100% responsive and the contents of the grid stay inside the viewable area of the browser regardless of the size, columns, or rows.
Here's an example:
.wrapper {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
}
<div class="wrapper">
<div>
<iframe
src="..."
height="100%"
width="100%"
allowfullscreen="true">
</iframe>
</div>
<div>
<iframe
src="..."
height="100%"
width="100%"
allowfullscreen="true">
</iframe>
</div>
</div>
<div className="modal fade in" id="HelpVideo">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-body">
<iframe width="100%" height="350" src="https://vimeo.com/273326561" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
I am using the above modal, in the modal i am trying to use Iframe but I am getting Refused to display 'https://vimeo.com/273326561' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
Try:
<div className="modal fade in" id="HelpVideo">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-body">
<iframe src="https://player.vimeo.com/video/273326561" width="100%" height="350" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
</div>
I went to your video, hit share, then copy and pasted to embed code, then customized it to your dimensions
How do I get an iframe to appear under an image and align to the right? Here's my code.
<img src="images/pc-mag.png" width="500" height="275" align="right">
<iframe width="500" height="400" align="right" src="https://www.youtube.com/embed/9rR5PpHSoIQ" frameborder="0"></iframe>
<h3 class="subHD">SubTitle</h3>
<p>Body paragraph</p>
Thank you for the help. Here's the code that worked.
<div class="FullPage">
<!--container for image and iframe -->
<div style="float:right; margin-left:20px">
<img src="images/pc-mag.png" width="500" height="275" align="right"><br>
<iframe width="500" height="400" align="right" style="margin-top:20px" src="https://www.youtube.com/" frameborder="0"></iframe>
</div>
<img src="../images/Logotype.png" width="190" height="101"/>
<h3>Title</h3>
<p>Body text</p>
</div>
Check this jsfiddle i have wrapped iframe and img inside divs
iframe,img{
float:right;
}
div{
clear:both;
}
There are two image tags, not sure under which image tag you want to align iframe?
Suggestion: You can wrap your iframe in paragraph tag and can align anywhere you want.
For example: <p style="text-align:right;"> <!--here you can add iframe --> </p>
I want them to align beside each other and I can't use table formatting
<div align=left><img src="../data/banner.png" alt="Logo" width="20%" height="100%"></div>
<iframe name="main_Frame" height="100%" width="80%" src="../data/home.htm" frameborder="0" align="right"></iframe>
<div style="width:20%; float:left;"><img src="../data/banner.png" width="100%" alt="Logo"></div>
<div style="width:80%; float:right;"><iframe name="main_Frame" src="../data/home.htm" frameborder="0" width="100%"></iframe></div>
This should get them to align horizontally, provided they won't inherit some other styling attributes.
If you are just starting out you should try thinking of sites as blocks of divs before anything else,
<div style="position:relative; overflow:auto;">
<div style = "width:20%; float:left;">
<a href="../data/home.htm" target="main_Frame">
<img src="../data/banner.png" alt="Logo"></a>
</div>
<div style = "width:80%; float:left;">
<iframe name="main_Frame" src="../data/home.htm" frameborder="0" align="right"></iframe>
</div>
</div>
I would recommend learning some CSS, here is a good: http://www.codecademy.com/tracks/web
I'd like to place an image under my iframe, but i've pieced together some code and it doesn't appear to be exactly right. The iframe contains text and has a transparent background. Can you help me out? thanks,
<td width="216" style="position: relative;">
<img src="http://southwestarkansasradio.com/images/onair995.jpg"></a><br>
<img src="http://southwestarkansasradio.com/images/playerbackground.jpg" style="z-index: -1"/>
<div style="absolute;left:0px;top:0px;font-size: 32px;display: none">
<iframe name="I1" width="316" height="216" src="http://southwestarkansasradio.com /NowPlaying.html" border="0" frameborder="0" allowTransparency="true">
Your browser does not support inline frames.</iframe>
</div>
</td>
<img src="http://southwestarkansasradio.com/images/onair995.jpg"></a><br>
<img src="http://southwestarkansasradio.com/images/playerbackground.jpg" style="z-index: -1"/>
<div style="position:absolute;left:0px;top:0px;font-size: 32px">
<iframe width="316" height="216" src="http://southwestarkansasradio.com/NowPlaying.html" border="0" frameborder="0" allowTransparency="true">
Your browser does not support inline frames.</iframe>
</div>
You have 'display:none' on the div tag that contains the iframe. I tested the above code and it works as you have explained is should.