I have some links on my page and everyone is linked to a popup which should load an iframe with a dynamic source attribute. The iframe has a div called 'pholder' in which the iframe should be loaded. So on every link should be another iframe. But it isn't. It's always the same. To be exactly, it's always the last link and I don't know why. Here you can see the HTML of the popup:
<div id="toPopup3">
<div id="videoContainer">
<div id="activeVideo">
<div class="pholder"></div>
</div>
</div>
</div> <!--toPopup3 end-->
I have to say that my links all have the class toPopup3 link + e. e is the maximum of Videos (0-23). So I use this code to add the iframe:
var videoLink;
var split;
$('[class^="topopup3 link"]').each(function(){
videoLink = $(this).attr('href');
split = videoLink.split("/");
});
$('.pholder').html('<iframe src="http://player.vimeo.com/video/'+split[3]+'?title=0&byline=0&portrait=0&color=fc6626" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');
So it always shows the last source in the iframe and I don't get rid of it. Can someone help me?
Here is a link to the live version of the page: Live Page. The problem occurs at 'film production'. I also put console.log(split[3]); in the code to see the order of the links.
Edit: given a little more insight into your goal, I think it would be better to accomplish this with a clickhandler:
$('[class^="topopup3 link"]').on('click', function(){
var videoLink = $(this).attr('href');
split = videoLink.split("/");
$('.pholder').html('<iframe src="http://player.vimeo.com/video/'+split[3]+'?title=0&byline=0&portrait=0&color=fc6626" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');
// may need to show the iframe modal or whatever here
});
Your not doing anything with the split variable until you are done looping, therefore the value will be the last one. If you are wanting to use each value, you need to move your subsequent $('.pholder')... code into your each block
Related
I am trying to implement a embedded youTube link to a custom Html page and setting it to autoplay but as I open my Homepage video doesn't play and only played when clicked .
<iframe width="1560" height="415" src="https://www.youtube.com/../?autoplay=1"
frameborder="0" allowfullscreen></iframe>
I want to make it responsive.
I'm not sure if this helps or even works but have you tried something like this?
$(document).ready(function() {
$(iframe).click();
});
You said https://www.youtube.com/../?autoplay=1
Get rid of that slash before the question mark
I think it should be https://www.youtube.com/viddata?autoplay=1 instead.
Maybe thats why its not playing
Get rid of the slash in the URL like Coder2195 said (https://www.youtube.com/viddata?autoplay=1). Also try to add this script to the HTML file:
<script>
window.onload = function() {
var videoElement = document.getElementById("videoElement");
videoElement.click()
}
</script>
And make the iframe element have a custom id:
<iframe id="videoElement" width="1560" height="415" src="https://www.youtube.com/../?autoplay=1" frameborder="0" allowfullscreen></iframe>
I have tried to test other questions using StackOverflow, but I couldn't get it to work.
The frame will not scroll to the anchor.
<iframe src="http://coder0.weebly.com/browsers-images.html#B0" width="95%" height="50" target="_parant" id="comfra" frameborder="0" scrolling="no">
<p>Please click here</p>
</iframe>
The id is B0.
The iframe can't be used like that. Please check: What is iframe used for?
You can't add content to an iframe tag like that.
You can check this javascript solution:
Insert content into iFrame
I have a unique issue where I am loading a lot of iframes on a page and it significantly reduces performance.
Since they are all inside of popup modals, I want to trigger the iframe to load after someone clicks on the modal.
When the modal loads using JS, a class is added called '.in' and this data attribute is changed from true to false "aria-hidden="false".
Here is a sample of the DIV as the trigger:
<div id="ModalPopUp-data-integration-service" class="modal hide fade in" data-
backdrop="true" data-keyboard="true" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block;">
Here is the iframe I want to load:
<iframe src="http://XXXXX.com" width="100%" height="800" type="text/html" frameborder="0" allowtransparency="true" style="border: 0"></iframe>
This is what you could use. Don't set src attribute by default for iframe, but e.g data-src one:
<iframe data-src="http://XXXXX.com" width="100%" height="800" type="text/html" frameborder="0" allowtransparency="true" style="border: 0"></iframe>
Then once needed, set the relevant src attribute depending data one. You could use transitionend event for that:
document.addEventListener('transitionend', function(e) {
var iframe = e.target.id === "ModalPopUp-third-party-content" && e.target.querySelector('iframe');
if (iframe && !iframe.src) {
iframe.src = iframe.dataset.src;
}
}, false);
That's said, you'd have better to use relevant modal event onshown, check doc. BUT your site is really really buggy and gives headhache to debug. I really don't want to be rude. It would need serious refactorization like said in other answer.
I'm even not sure why you use iframes when i guess a single form, setting on each opening event modal relevant info would be enough.
I built 2 custom google maps for a site and have embeded them with iframes on a mobile site: mobile.moodyplumbingmpi.com The maps do not display the custom map but a map of the Southern Hemisphere when first viewed by taping service areas. If I hit refresh, the correct maps display. Wondering if I am missing some sort of jquery command to display on opening or something like that. I am completely stuck on this. Any help would be greatly appreciated! Mike
Here is the code for the section that displays the maps:
BackMoody Plumbing
<article data-role="content">
<h2>Moody Plumbing Service Area</h2>
<ul data-role="listview" data-inset="true" data-filter="false">
<li>
<h3>Warren Service Areas</h3>
<iframe width="250" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://mapsengine.google.com/map/embed?mid=zaIx6P-nAOUk.kQ2ZNNmaryIQ"></iframe><br /><small>View Larger Map</small>
</li>
<li>
<h3>Youngstown Service Areas</h3>
<iframe width="250" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://mapsengine.google.com/map/embed?mid=zaIx6P-nAOUk.kkUe66oIEZgU"></iframe><br /><small>View Larger Map</small>
</li>
</ul>
</article>
<nav data-role="footer">© <script>new Date().getFullYear()>2010&&document.write(+new Date().getFullYear());</script> Moody Plumbing Visit Full Site
</nav>
So your issue is that the iFrames containing the maps are being built while they are hidden. This confuses the Google MapsEngine API which expects the viewport window to be properly sized and visible. When you toggle the iFrame's visibility from the "Service Areas" button, the MapsEngine just plunks down at zoom 1 at lat/lng 0,0.
I think one solution is to dynamically re-set the SRC of the iFrames when the "Service Areas" button is pressed. Change the two iFrame tags to include a unique id:
<iframe id="location1" width="250" height="250" ...
<iframe id="location2" width="250" height="250" ...
Then add a simple script into the HEAD of the HTML document; I didn't think of this, it came from: Reload an iframe with jQuery
<script type="text/javascript">
$(document).on("pageshow", "#locations", function(event, data) {
$('#location1').attr('src', function(i, val) { return val; });
$('#location2').attr('src', function(i, val) { return val; });
});
</script>
The reload is a bit jumpy. So other possible options to consider include:
dynamically trigger a refresh of the iFrames when the "Service Areas" button is pressed; there is code online for this but it does not appear to work in all types of browsers.
Put a couple of DIVs in as placeholders, then use javascript to insert the iFrame HTML as innerHTML of the DIVs.
Find a way to trigger a map RESIZE event [google.maps.event.trigger(???, "resize");] similar to one of the answers in the following link; I don't know if this is possible using the MapsEngine: google maps not displayed correctly unless refreshing
You do need to make sure about the timing of events. The #locations SECTION needs to be completely visible before attempting any of the above to allow the MapsEngine initialization to work properly. You will need to set an event to know when the SECTION has become visible before poking at the iFrames (the jQuery pageshow event does this as provided in the code sample above).
Finally, I'm not sure if you built the maps using Google's MyMaps or using Google MapsEngine. If you indeed used MapsEngine, you need to be aware that Google is terminating the MapsEngine at the end of 2015, and these two maps will become non-operable.
I have an image that I want the user to see. When the user clicks on this image I want the image to go away and have the video show in it's place. Can someone show me how to do this?
Here is the code I have so far.
<div id="homeflash" style="height:413px; background-image:url(../../../upload/1/img/homeFlashBG.jpg);">
<a href="#">
<img src="../../../upload/1/img/video.jpg" style="display:none" />
</a>
<div id="video" style="display:inline">
<iframe allowfullscreen="" frameborder="0" height="395" src="//www.youtube.com/embed/X8mLel_werQ?rel=0" width="691"></iframe>
</div>
</div>
If someone could edit my post to clean the code up that would be great. I can't figure it out.
To describe the code a little bit:
This is what the code should look like after I click on the image. When you first see the page, the two display styles will be reversed.
Any help will be awesome.
Thanks
A general Idea can be like this:
$(function() {
$("img").click(function() {
$(this).css("display","none"); // will hide your image
$("body").append("<div id='video'></div>"); // will append div with id video, this div should have video code inside this.
});
});
You want to hide the video initially, so give it the style display:none. You also want to give your thumbnail image an id so you can reference it in jQuery. You can also remove the <a> tag from around the image (its not needed)
HTML
<div id="homeflash" style="height:413px; background-image:url(../../../upload/1/img/homeFlashBG.jpg);">
<img id="thumbnail" src="../../../upload/1/img/video.jpg" />
<div id="video" style="display:none">
<iframe allowfullscreen="" frameborder="0" height="395" src="//www.youtube.com/embed/X8mLel_werQ?rel=0" width="691"></iframe>
</div>
</div>
JavaScript
$(document).ready(function(){
$("#thumbnail").click(function(){
$(this).hide()
$("#video").show()
})
})
I would also try to avoid adding CSS styles inline if you can