iframe fullscreen 100% width - javascript

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

Adding content (including iframes) via innerHTML is incomplete

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

Iframe in Materialize Carousel Not working

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.

How to do vertical carousel news slider using JQuery and CSS?

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

mb_YTPlayer - Can't insert YouTube video inside div

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:

Resize iframe without aspect ratio

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%;
}

Categories

Resources