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>
Related
Can anyone say why this is wrong? I thought the yellow div would be across the whole page like the pink div. But when I look at it - no, the yellow div lines up under the image not the whole length.
<div style=width:100%;background:pink>
fjadlskjfdsf dslkfsda sdjkfh
</div>
<div style=width:100%;background:red>
<div style=width:60%;float:left>
<img src=Library_left.jpg width=100%>
</div>
<div style=width:40%;float:right>
<iFrame scrolling="no" frameborder="0" width="100%" height="100%" src="https://silib2.net/eResources/scripts/carousel/carousel.php"> </iFrame>
</div>
</div>
<div style=width:100%;background:yellow>
<h1 style=text-align:center>adslkjfasdlkjf</h1>
why is this div not wider?
</div>
( https://silib2.net/eResources/scripts/carousel/form.htm )
It is probably something stupid?
Please Try This:-
<div style=width:100%;background:pink>
fjadlskjfdsf dslkfsda sdjkfh
</div>
<div style="width:100%;background:red; clear: both; overflow: hidden;">
<div style=width:60%;float:left>
<img src=Library_left.jpg width=100%>
</div>
<div style=width:40%;float:right>
<iFrame scrolling="no" frameborder="0" width="100%" height="100%" src="https://silib2.net/eResources/scripts/carousel/carousel.php"> </iFrame>
</div>
</div>
<div style="width:100%;background:yellow; clear: both; overflow: hidden;">
<h1 style=text-align:center>adslkjfasdlkjf</h1>
why is this div not wider?
</div>
Static Height to Iframe May solve your issue
<iframe scrolling="no" frameborder="0" width="100%" height="165px" src="https://silib2.net/eResources/scripts/carousel/carousel.php"> </iframe>
You need to give your iframe a smaller height which would be approximately
height: 225px;
And you need to give the div that wraps it [one with red background on it]
clear:both; Overflow:hidden;
<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
This is what i have, not sure why its not showing side by side. I've tried using float left, and tried using the bootstrap grid with no success. Thank you.
<div class="container">
<img src="placeholder" alt="picture of the band " width="500" height="300">
</div>
<div class="container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/placeholder" frameborder="0" allowfullscreen></iframe>
</div>
I just use this . It works.
.container{
float: left;
}
If you are using bootstrap replace container with any other class name and do float:left it works.
<style>
.classname{
float: left;
}
</style>
<div class="classname">
<img src="placeholder" alt="picture of the band " width="500" height="300">
</div>
<div class="classname">
<iframe width="560" height="315" src="https://www.youtube.com/embed/placeholder" frameborder="0" allowfullscreen></iframe>
</div>
<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!
why can't i see the video, it just show a white space. (i edited the link of the video)
if i check the video on youtube its fine.
if i right click on the white space it says "movie not loaded" but even if i wait doesn't happen anything. i also uploaded the video on the ftp of the website, can i just load it from there? how?
<html>
<head>
<title></title>
</head>
<body style="margin:0px auto; text-align:center; color:white;" >
<div id="container" style="margin:0; padding:0; text-align:center;" >
<div id="main" style="width:100%;margin:0px auto;">
<div id="hdr" style="background-image:url(bg.jpg);float:left;width:100%;height:110px;">
</div>
<div id="hdr2" style="background-image:url(fascia.png);float:left;width:100%;height:70px;">
footer
</div>
<div id="bdy" style="background-image:url(bg.jpg);float:left;width:100%;height:70px;">
body
</div>
<div id="ftr" style="background-image:url(bg.jpg);float:left;width:100%;height:500px;">
<object width="640" height="360"><param name="movie" value="//www.youtube.com/v/xxxxxxxxx"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/xxxxxxxxx" type="application/x-shockwave-flash" width="640" height="360" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</div>
<div id="ftr2" style="background-image:url(bg.jpg);float:left;width:100%;height:280px;">
</div>
</div>
</div>
</body>
</html>
Use this:
<iframe width="640" height="360"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>
Hopes this helps!