There is this twitch embed streaming iframe i have created, it works good side by side with the chat and perfect the way i want to, the codes are below
.t_container{
display: inline-table;
width: 100%;
}
.ts_iframe{
display: table-cell;
width: 100%;
}
.tc_iframe{
width: 250px;
float:right;
}
<div class="t_container">
<div class="ts_iframe">
<iframe frameborder="0" height="250" width="100%" scrolling="no" src="http://www.twitch.tv/esl_lol/embed"></iframe>
</div>
<div class="tc_iframe">
<iframe frameborder="0" height="250" width="100%" scrolling="no" src="http://www.twitch.tv/esl_lol/chat"></iframe>
</div>
</div>
But now I have no idea how to make it to be responsive, I mean, I can make the iframes responsive but as you can see the iframes are side by side and the embed chat is smaller and it is difficult for me to apply a responsive css since I'm not quite good with it , so is it possible to be this and when visited on smaller screens like an "iPhone" the embed chat to drop under the embed video?
Try appending this to the end of your other CSS:
#media (max-width: 768px) {
.t_container { display: block; }
.t_container .tc_iframe { display: block; width: 100%; float:none; }
}
It's going to turn your table cell approach into blocks for screens that are 768 pixels wide or smaller.
Use media queries to control the output at certain breakpoints. In this case, you can use the same concept Bootstrap would do (and does). Make them 100% width! And make sure you float them, of course.
#media (max-width: 768px) {
.ts_iframe, .tc_iframe {
float: left;
width: 100%;
}
}
Herr is the DEMO
Related
I have used both HTML and CSS code to center a top of page banner. At 600 pixels, it is too wide for mobile phones, so I also substitute a 310px image for mobile phone viewports. After modifying jmore009's code, I got it down to the following that works and validates. But I had to use centering code in both the HTML and CSS. Is that the correct way to center it?
HTML 4.01 code:
<div class="centered">
<img src="images/short_banner.gif" alt="MYSITE.COM" class="image2">
<img src="images/long_banner.gif" alt="MYSITE.COM" class="image1">
</div>
CSS 3.0 code:
.image2{
display: none;
}
#media only screen and (max-width: 600px)
{
.image1 {
display: none;
}
.image2 {
display: block;margin:0 auto;
}
}
div.centered {
margin: 0 auto;
text-align: center;
}
I could not get the short banner to center without using a DIV. There must be a better way to center both the swapped banner images without using centering in both HTML and CSS code.
I am trying to display the content of a pdf with an iframe. Everything is working fine on a normal computer. However on mobile devices of apple (IPhone/IPad) only the first page of the pdf is getting displayed.
Here is my code where I already added some scrolling styles because I thought it was a problem related to the scrolling, but If I make the iframe very small it is possible to scroll! However the problem is still the same...only the first page is visible.
<div class="scroll-wrapper">
<iframe height="260" width="280" src="info.pdf"> </iframe>
</div>
.scroll-wrapper {
overflow-y:scroll;
-webkit-overflow-scrolling:touch;
width: 400px;
height: 300px;
}
Maybe you should try using viewport.
Or using responsive breakpoints
#media screen and (max-width:512px) {
size:
}
#media screen and (max-width:512px) {
.scroll-wrapper{
overflow-y:scroll;
-webkit-overflow-scrolling:touch;
width: 400px;enter code here
height: 300px;
}
}
try this
iframe {
width: 100% !important;
}
I have a type of "store-locator" on https://www.carcarenederland.nl/detailer-zoeker/detailer-zoeker/
Due to demand, I want to put this in an iFrame so other websites can display this form on their page. Giving them the possibility to easily add my "store-locator" to their website.
At the moment I have:
<iframe name="De Detailer-Zoeker" src="https://www.carcarenederland.nl/detailer-zoeker/detailer-zoeker/" scrolling="no" style="width:100%;height:734px;border:none;overflow:hidden;"></iframe>
Which works, as long as the screen doesn't get to small.
However, the form is responsive, and if the screen becomes very small, the row with addresses goes underneath the big map. Making the complete form a lot higher then on normal view. (normally it would be 734px high, in responsive design it is 1388px high)
This would mean that I need an iFrame that stretches just as the content stretches. (if that is at all possible)
If that is not possible, would it be possible to put something like this in the style? (it doesn't work if I use it in my example, but maybe I'm doing it wrong?)
Style="#media (max-width:675px){iframe{height:1388px}}"
The goal of this piece of CSS would be to change the height of the iFrame when the width goes below 675px.
Another solution is welcome, as long as it works :). Because I'm displaying the code on my website, so other can just copy-paste it, it would be beneficial if the code is kept reasonably simple.
It seems 1 person has removed their comment, even though the solution was pretty good. Essentially, this was the code that I ended up with thanks to him:
<style>#iframe {width:100%;height:740px;border:none;overflow:hidden;}
#media (max-width:675px){#iframe{height:1588px;}}
</style>
<iframe src="https://www.carcarenederland.nl/detailer-zoeker/detailer-zoeker/
"frameborder="0" id="iframe" name="De Detailer-Zoeker"></iframe>
The only problem is that this only responds to the size of the browser-screen, and not the container in which the iFrame is placed. This means that the iFrame will behave differently on a website with sidebars, then one without sidebars.
You have a couple ways of dealing with this issue.
1. Breakpoints
Add a breakpoint the moment the list of address goes underneath the map. You can use CSS Media Queries to acheive this.
#media (max-width: 675px) {
iframe {
height: 1388px;
}
}
2. Javascript
Use Javascript to read the width of the screen and then change the height of the iframe accordingly.
Adjust width height of iframe to fit with content in it
Make iframe automatically adjust height according to the contents without using scrollbar?
However the Javascript method has drawbacks.
It works fine when you define all CSS in an external style sheet.
iframe {
width: 100%;
height: 734px;
border: none;
overflow: hidden;
}
#media (max-width:675px) {
iframe {
height: 1388px
}
}
<iframe name="De Detailer-Zoeker" src="https://www.carcarenederland.nl/detailer-zoeker/detailer-zoeker/" scrolling="no"></iframe>
code for responsive iframe
<style type="text/css">
iframe {
width:100%;
height:734px;
border:none;
overflow:hidden;
}
#media screen and (max-width:1166px) {
iframe {
width:100%;
height:734px;
}
}
#media screen and (max-width:1024px) {
iframe {
width:100%;
height:734px;
}
}
#media screen and (max-width:980px) {
iframe {
width:100%;
height:734px;
}
}
#media screen and (max-width:767px) {
iframe {
width:100%;
height:1388px;
}
}
#media screen and (max-width:599px) {
iframe {
width:100%;
height:1388px;
}
}
#media screen and (max-width:479px) {
iframe {
width:100%;
height:1388px;
}
}
#media screen and (max-width:374px) {
iframe {
width:100%;
height:1388px;
}
}
</style>
<iframe name="De Detailer-Zoeker" src="https://www.carcarenederland.nl/detailer-zoeker/detailer-zoeker/" scrolling="no"></iframe>
You are almost there, you just need to adjust your media query a bit.
You say you want other websites to include your iframe without having to edit their CSS file. You can do that as followed:
Tell the client to place the following CSS in their <head> section.
<style>
#media screen and (max-width:675px){
#iframe{
min-height:1388px;
overflow-y: scroll !important;
}
}
</style>
Then, tell them to put the iframe between the <body> tags where they want to display the iframe.
<iframe id="iframe" name="De Detailer-Zoeker" src="https://www.carcarenederland.nl/detailer-zoeker/detailer-zoeker/" scrolling="no" style="width:100%;height:734px;border:none;overflow:hidden;"></iframe>
Look at this working fiddle:
Hope this helped!
This question already has answers here:
Making an iframe responsive
(24 answers)
Closed 5 years ago.
I'm trying to make a responsive template and I'm using iframes for youtube videos.
When i put a caption underneath the video it works fine on desktop, but when I go to responsive mobile mode there is big between caption and video.
Can any body help me to fix it, so that caption stay underneath the video regardless wether I'm on desktop or mobile.
Here is the link for my template:
http://www.sayarts.com/past-events.html
You are not using the right approach to make your videos responsive. Height for your videos remain fixed that's why their is huge gap between videos and caption on mobile phones.
To make the videos perfectly responsive, add the video inside a div like this:
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>
and then use the following CSS:
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
You can read more about it in this article
You can simply add this style to the wrapper element: height:auto, it seems to fix the problem.
#wrapper embed, #wrapper iframe {
max-width: 100%;
height: auto;
}
If you need more control use the responsive media queries, this is an example:
#media only screen and (max-width: 468px) {
body {
/*you specific styles*/
}
}
I have defined height for iframe but mobile browsers ignore height (except firefox). On desktop browsers is not problem. It also ignore my main div. Iframe is in main div. I tried:
overflow: auto;
-webkit-overflow-scrolling:touch;
it do not help.
Iframe:
<div class="main">
<iframe id="webmaster_frame_id" name="webmaster_frame_name" src="http://lshunter.net/ls/index.php?option=com_lsh&view=lsh&layout=webmaster&tmpl=component§ions=1&font_type=Times New Roman&font_size=11px&start_time_eventtitle_font_size=12px&tvname_font_size=12px&tz_name_font_size=12px" width="790" height="600" scrolling="auto" align="top" frameborder="0">Your browser does not support frames, so you will not be able to view this page.</iframe>
</div>
main div css:
.main {
height: 1150px;
width:100%;
margin-left:auto;
margin-right:auto;
margin-top: -66px;
opacity: 0.83;
background-color: #FFFFFF;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
}
This is how it looks on mobile browser.
The height is too high for a mobile browser... If you want that the iframe works correctly, I have two solutions for you :
Definit a min-height in the css code for .main code.
Create a mobile version of the code.
For the second solution, there is an example :
/* mobile CSS */
#media screen and (max-width: 480px)
{
.main {
height: 480px;
}
}
If you want additional information, check here : http://en.wikipedia.org/wiki/Responsive_web_design
An example of Responsive Web Design : CSS Zen Garden