I've managed to do a Iframe that shows only certain part of the page with this code:
<div id="divContainer" style="display: block; margin-left: auto; margin-right: auto;">
<div id="frameContainer" style="overflow:hidden;">
<iframe src="http://www.cofm.es/informacion-corporativa/buscador-farmacias" scrolling="no" style="width: 1000px; height: 750px; margin-top: -330px; margin-left: -250px;" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe><br />
</div>
Source: iframe to Only Show a Certain Part of the Page
Now what I'm trying to do is to make the Iframe show on the 100% width on the screen. I've been able to do this with images with this code:
<img style="width: 100%; display: block; margin-left: auto; margin-right: auto; " src="http://i.ytimg.com/vi/ROv863DuJu4/maxresdefault.jpg" />
I'm trying to make the iframe adapt to the screen size like the image does.
Iframe is an inline element - You need to set css " display:block " - then you can make it 100% and it will scale - Hope this helps.
here is an example - you would have to set the containing element to full width as well..
<iframe style='display:block;width:100%' src='http://someurl.com'></iframe>
https://jsfiddle.net/cqgfqgqk/
Related
Create simple page that loading into div some content by innerHTML, but when i use this javascript:
document.getElementById("someDiv").innerHTML =
'<iframe id="test1" class="yt-embed " style="top: 50px; width: 98%; height: 80%; margin-left: 1%;" src="https://www.youtube.com/embed/R7Ui_FnOPh8?rel=0&enablejsapi=1" allowfullscreen="false" frameborder="0" /><br>TEST';
But everything after iframe is not added.
Does anyone know why this is so?
An iframe cannot be self-terminated as in: <iframe />. You must provide an explicit closing tag for the element:
<iframe id="test1" class="yt-embed " style="top: 50px; width: 98%; height: 80%; margin-left: 1%;" src="https://www.youtube.com/embed/R7Ui_FnOPh8?rel=0&enablejsapi=1" allowfullscreen="false" frameborder="0"></iframe><br>TEST
In Materialize Carousel method instead of normal images, I have inserted Iframe to embed a web link in slides. On inserting Iframes, clicking to switch slide doesn't work.
Carousel Method:
<div class="carousel">
<a class="carousel-item"> <iframe style=' max-height: 700px; max-width: 420px; width: 340px; height: 566px;' src='http://www.website.com' frameborder='0' allowfullscreen scrolling='no'></iframe></a>
<a class="carousel-item"> <iframe style=' max-height: 700px; max-width: 420px; width: 340px; height: 566px;' src='http://www.website.com' frameborder='0' allowfullscreen scrolling='no'></iframe></a>
<a class="carousel-item"> <iframe style=' max-height: 700px; max-width: 420px; width: 340px; height: 566px;' src='http://www.website.com' frameborder='0' allowfullscreen scrolling='no'></iframe></a>
<a class="carousel-item"> <iframe style=' max-height: 700px; max-width: 420px; width: 340px; height: 566px;' src='http://www.website.com' frameborder='0' allowfullscreen scrolling='no'></iframe></a>
</div>
The non active slides are not clickable. On clicking, they don't get activated.
Kindly help me find a solution
In the iframe's style attribute, add:
pointer-events: none;
to disable click events on the iframe. This will make sure click events correctly bubble up to the Materialize Carousel plugin.
I want to create a vertical slider using jQuery and CSS. Here is my code:
HTML & JavaScript
<script>
$.fn.cycle.defaults.autoSelector = '.slideshow';
</script>
<div class="slideshow vertical" data-cycle-fx=carousel data-cycle-timeout=0 data-cycle-next="#next3" data-cycle-prev="#prev3" data-cycle-carousel-visible=2 data-cycle-carousel-vertical=true>
<img src="http://malsup.github.io/images/beach1.jpg">
<img src="http://malsup.github.io/images/beach2.jpg">
<img src="http://malsup.github.io/images/beach3.jpg">
<img src="http://malsup.github.io/images/beach4.jpg">
<img src="http://malsup.github.io/images/beach5.jpg">
<img src="http://malsup.github.io/images/beach9.jpg">
</div>
<div class="center">
<button id="prev3">∧ Prev</button>
<button id="next3">∨ Next</button>
</div>
CSS
.slideshow {
margin: auto;
position: relative;
overflow: hidden;
height: 200px;
}
.slideshow img {
width: 100px;
height: 100px;
padding: 2px;
}
div.responsive img {
width: auto;
height: auto
}
.cycle-pager {
position: static;
margin-top: 5px
}
JSFiddle
However, it's showing only two images. I want to show 3 or four images.
I also have a CodePen, but it's showing only one slider text.
How can I change and make it 2 to 3?
If you set the height of .slideshow to 312px this should do the job.
See here.
Or even easier, set the data-cycle-carousel-visible=X to the desired amount X of pictures shown. For example data-cycle-carousel-visible=3
I'm trying to embed an Youtube video inside a Div, but the video appears outside the Div.
I'm using a library called mb YTPlayer to do that.
My website demo:
I would like to put the video inside the div with red background.
My code:
CSS:
.screen{
background-image: url('img/window.png');
width: 950px;
height:390px;
margin:auto;
}
.videoprom{
padding-top:91px;
padding-left:5px;
}
.videoprom span{
display:block;
width:940px;
height:390px;
background-color:red;
}
My HTML:
<div class="screen">
<div class="videoprom">
<span class="test">
<a id="video" class="player" data-property=
"{videoURL:'https://www.youtube.com/watch?v=vLUNWYt3q1w',containment:'.test',autoplay:true, mute:true, startAt:015, stopAt:110, opacity:5}"></a></span>
</div>
</div>
How can I fix that? Thanks.
Add a relative positioning to the div to fit into the container and then adjust the padding or margin.
.screen {
background-image: url("img/window.png");
height: 390px;
margin: auto;
position: relative;
width: 950px;
}
#wrapper_mbYTP_video {
margin-top: 90px;
}
Output:
I am trying to create a responsive iframe that will get a map, but when I resize the browser, it resizes using the aspect ratio, and I would like him to remain filling the entire space. As in this example: http://dev.fhmp.net/tailorfit/demo/, in the case where the overflow is crop.
Today it looks like this:
.iframe-rwd {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.iframe-rwd iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<section id="container">
{% include "main/header.html" %}
{% include "main/sidebar.html" %}
<section id="main-content">
<section style="padding-right: 0px;padding-left: 0px;" class="wrapper">
<div class="iframe-rwd">
<iframe
name="main-content"
src=""></iframe>
</div>
</section>
</section>
</section>
In the past i've just set the iframe width to 100%, if you have the iframe in a responsive container than it will always take that width and retain whatever height you set the iframe to.
This solution is from Dave Rupert / Chris Coyier (I think). It requires a wrapper div but works pretty well.
HTML
<div class="iframe-rwd">
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Seattle,+WA&aq=0&oq=seattle&sll=37.822293,-85.76824&sspn=6.628688,16.907959&t=h&ie=UTF8&hq=&hnear=Seattle,+King,+Washington&z=11&ll=47.60621,-122.332071&output=embed"></iframe><br /><small>View Larger Map</small>
</div>
css
.iframe-rwd {
position: relative;
padding-bottom: 65.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.iframe-rwd iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}