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.
Related
I have videos that play on hover but the overlays I use block this function. I'd like to have an opaque overlay with text pop up over the video and it still plays on hover. So my question is how can I add a text and opaque overlay that doesn't block the play on hover.
reference: https://axisstudiosgroup.com/work/
I am using the following:
js:
jQuery(document).ready(function($){
var oPlayer = $("#" + this.id);
$('.work-grid .work-item').on('mouseenter', '.play-video', function(e) {
e.preventDefault();
oPlayer = $(this);
froogaloop = $f(oPlayer[0].id);
froogaloop.api('play');
}).mouseleave(function() {
froogaloop = $f(oPlayer[0].id);
froogaloop.api('pause');
froogaloop.api("seekTo", 0);
});
});
css:
.work-grid {
display: grid;
grid-row-gap: 25px;
width: 100%;
margin-bottom: 80px;
}
.work-item {
position: relative;
margin-top: 0px;
overflow: visible;
}
.work-wrap {
position: relative;
padding-bottom: 58.25%;
}
.work-item iframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0.125rem solid transparent;
}
.work-item img {
display: block;
height: auto;
max-width: 100%;
height: 100%;
width: 100%;
}
html
<div class="work-grid">
<div class="work-item">
<div class="work-wrap">
<a href="#">
<div class="work-item-overlay">
</div>
<div>
<iframe id="player1" class="play-video" src="https://player.vimeo.com/video/#?api=1&player_id=player1&title=0&byline=0&portrait=0&autoplay=0&background=1" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="work-item-details">
<h3 class="work-item-title">Title</h3>
</div>
</a>
</div>
</div>
Actually, this was solved by simply moving the overlay div to a different position.
<div class="work-item">
<div class="work-wrap">
<a href="example.com">
<div>
<iframe id="player29" class="play-video" src="https://player.vimeo.com/video/#?api=1&player_id=player29&title=0&byline=0&portrait=0&autoplay=0&muted=1&background=1" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="work-item-details">
<div class="work-item-overlay">
<h3 class="work-item-title">TITLE</h3></div>
</div>
</a>
</div>
</div>
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
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 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%;
}
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/