I want to have an embedded Youtube video and when I click on an tag, it changes the iframe scr to an other Youtube video. The page should not reload completely, only the iframe if needed and the src it must be able to change again by clicking a different link.
Please help if possible!
You use a normal link, but its target attribute is the ID of the <iframe> you want to load it into. Example:
Page 1
Page 2
<iframe name="myframe" id="myframe"></iframe>
Of course, you will need to know the ID of the frame (if it has one) and how to format the link to insert.
Related
I noticed that when you embed sites like Youtube.com and Streamble.com, only the video appears in the iframe. How do they do that? Shouldn't an iframe load the whole webpage?
What I've tried:
Initially I thought you're supposed to wrap the mp4 file in og:video tags, but that didn't work.
How do they do that? By only serving up the video. Look at the url in the src attribute on the iframe. Load it up on a browser (you'll need to add http to the front of it) and you'll get only the video content.
Im using the iframe tag to display videos in my site, but it keeps showing a download button (see the picture bellow) that I need to disable.
<iframe src="http://techslides.com/demos/sample-videos/small.mp"></iframe>
Is it possible to disable and to control this?
It should not be able to if the pages are from different domains.
It might work when the two pages are from the same domain. In this case you can try:
window.frames[0].document.getElementById('buttonId') ...//you can use javascript or jquery to remove this elment
Here's what I'm trying to do. I have a bunch of thumbnails on a page and each one links to a page which has a youtube video embedded on it (so it's like a playlist). I was thinking it would be possible to simply swap out the current youtube embed rather than having it load an entirely new page.
The youtube embeds are iframes, so I'd need a way of, when clicking an image (I'm guessing javascript onclick might be the best solution) then have it change the current iframe to something else. I can do this linking to the pages which have the youtube embed, but I'd like to do it without needing to load a page - just grab some html and plug it in the iframe spot.
Any ideas?
You don't need to use javascript to load something into an iframe. You can add a name attribute to your iframe and then set the target of your link to that name. Something like this will work:
<iframe width="420" height="315" src="http://www.youtube.com/embed/zSgiXGELjbc" frameborder="0" allowfullscreen name="youtube_iframe"></iframe>
<p>load another video</p>
See a demo here: http://jsfiddle.net/q3Nas/
I have this code to hide iframe until link is clicked
link
</br></br>
<div style="display:none;"><iframe id="iframe1" name="iframe1" src="#"></iframe></div>
I want to hide link after iframe is loaded
How i can do that please ?
If there is code is better than my code please post it too
Thank you
Change your link to this:
link
It sets the style of the link to display: none.
Also, I set the display for the iframe to block instead of ''. You should consider moving your css and javascript outside of your HTML into external files, or at least to a <style> tag for CSS and a <script> tag for JS.
Use jQuery's .load() event:
The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.
$("#iframe").load(function(){
$("#link").hide();
});
Simple Vimeo iframe click does not work:
$('iframe').click(function(){
alert('ok');
});
I've also tried:
$('body').click(..
$(document).on('click','iframe',..
But when user clicks video while hovering it, nothing works, it just plays the video.
if you include the query parameter api=1 in your embed code, you can access events, including those events triggered when the user clicks the video in the iframe (play,pause). You'll also probably want to include their froogaloop.js file to more easily access these events.
<iframe id="player1" src="http://player.vimeo.com/video/27855315?api=1&player_id=player1" width="400" height="225"></iframe>
http://developer.vimeo.com/player/js-api
http://jsfiddle.net/bdougherty/HfwWY/light
https://github.com/vimeo/player-api/tree/master/javascript
It is a third party domian in the iframe, you can not do it because of same origin policy.
Unfortunately, you cannot track clicks in cross-domain iframes due to same origin policy, as epascarello has previously said.
You could set up a "thumbnail" that the user clicks, which would pull up that popup and then subsequently replace the thumbnail with the actual video. Just embed the video you want, but keep it as a hidden div, then use .show() when you want it to start playing.
Source
try this:
$('iframe').contents()
.find('[src*="vimeo.com"]')
.click(
function(){
alert('foo');
}
);
I found that before I could get anything inside the iframe to be found I needed to determine if the iframe was loaded. Then if the iframe gets loaded after page load or reloaded later in the process, your click function works.
jQuery('#iframe').load(function() {
jQuery('#iframe').contents().find('#play-button').click(function () {
// do your stuff
});
}
** this may or may not work cross-domain, but determining if the iframe loaded can be used as a hackish method of determining if something has happened in the iframe. If you created a "play" button on your domain on top of the iframe it could be used to load the iframe via a click function after page load and then your load function could contain your slideshow pause.