Develop Reference

is there a way to reload after removing an iframe?

The 1 and 3 are id of button and v1 and v3 are id of iframe(youtube emmbedded).
i have already used a simple .show() and .hide() but the audio remained of hidden iframe so i am using .remove() and .show().
when i use .remove() the other iframe is gone completely and only iframe remains is of that button which i pressed which i want.
however when i press button 3 the removed iframe is not able to load, is there a way to reload it?
the iframes i am using are :-
<iframe width="560" height="315" id="v1" src="https://www.youtube.com/embed/xGRjCa49C6U?modestbranding=1&controls=0&autoplay=1&loop=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" ></iframe>
<iframe width="560" height="315" id="v3" src="https://www.youtube.com/embed/9V9wr1AaIxY?modestbranding=1&controls=0&autoplay=1&loop=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" ></iframe>
and this is the js:-
$(function(){
$('#1').on('click',function(){
$('#v1').show();
var getframe = document.getElementById("v3");
getframe.remove();
});
$('#3').on('click',function(){
$('#v3').show();
var getframe = document.getElementById("v1");
getframe.remove();
});
});

Remove() method removes the element from the dom and its hard to reload.
So this can be done like the following.
Load YouTube iFrame API:-
<script src="https://www.youtube.com/iframe_api"></script>
Create two different players that references the existing iFrames
$(function(){
window.YT.ready(function() {
var player1 = new YT.Player('v1');
var player3 = new YT.Player('v3');
$('#1').on('click',function(){
$('#v1').show();
player1.unMute();
$('#v3').hide();
player3.mute();
});
$('#3').on('click',function(){
$('#v3').show();
player3.unMute();
$('#v1').hide();
player1.mute();
});
});
});
Demo
Hope this helps

How to play youtube video using angularjs

All the following code is work successfully to get youtube playlist and display it with no problem. But I can't play any video from this list using angular js.
Angular JS
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope, $http) {
//contentDetails - snippet
$http.get('https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=50&playlistId=PLlMsyZB0poTDYImmOliKyiC-jpAFUsr6X&key=AIzaSyDGm1uzuqPPUGzG-qN7u6gTaS8ApXBJYvw')
.then(function (response) {
$scope.records = response.data.items;
});
$scope.PlayFun = function (Val) {
var Vid_ID = Val;
var New_Vid = "<iframe width='450' height='283' src='https://www.youtube.com/embed/" + Vid_ID + "?autoplay=1&loop=1&rel=0&wmode=transparent' frameborder='0' allowfullscreen wmode='Opaque'></iframe>";
var Vid_Elm = document.getElementById("video");
Vid_Elm.setAttribute("crs", New_Vid);
};
});
HTML
<iframe id="video" style="position:fixed;top:150px;right:50px;" width="420" height="315" src="//www.youtube.com/embed/9B7te184ZpQ?rel=0" frameborder="0" allowfullscreen></iframe>
<br />
<ul data-ng-app="myApp" data-ng-controller="myCtrl">
<li data-ng-repeat="x in records">
<img class="img-thumbnail" style="width:100px; height:80px;"
src="{{x.snippet.thumbnails.default.url}}" />
<br />
<input data-ng-click="PlayFun(x.snippet.resourceId.videoId)" type="button" value="{{x.snippet.title}}" />
</li>
</ul>
My problem specifically is in "$scope.PlayFun" where I can't run a video from the list by video id using angular js.
My approach is to change iframe html on ng-click to pass new selected Vid_ID and to make it "autoplay=1" put it doesn't work.

You can set the src of the iframe to ng-src like so:
<iframe id="video" style="position:fixed;top:150px;right:50px;" width="420" height="315" ng-src="{{videoSource}}" frameborder="0" allowfullscreen></iframe>
And in your controller you simply change the url of video source and it will automatically change the video source. You do need to trust as resource url though for security (which means injected $sce as well)
$scope.videoSource = $sce.trustAsResourceUrl("//www.youtube.com/embed/9B7te184ZpQ?rel=0");
Working PLunker demo

Change parent frame url if iframe url changes

I have iframed a page:
<iframe src="http://externalwebsite.com/test.html" scrolling="no" height="400px" width="400px" allowfullscreen></iframe>
And I want to change the parent url to http://mywebsite.com/succes.html if the iframe url changes to http://externalwebsite.com/succes.html
I was trying to figure it out with JavaScript but I didn't manage to do it. Can someone help me?

<iframe id="frameId" src="http://externalwebsite.com/test.html" scrolling="no" height="400px" width="400px" allowfullscreen></iframe>
Bind to the frame.onload event in the parent window.
var frame = document.getElementById('frameId');
frame.onload = function(e){
if(frame.src === 'http://externalwebsite.com/succes.html' ){
window.location.href = 'http://externalwebsite.com/succes.html';
}
};
Try frame.src='someUrl'; for test.

Swapping content of div, on click on image or iframe (Vimeo)

I have some issue:
I have some container, and three elements below this div. Three elements are images or iframe with vimeo embedded movie.
In first case i have :
<div id="media-content">
<iframe src="https://player.vimeo.com/video/1271?api=1" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>
And below:
<div class="media-list" id="media-list">
<span> <?php echo $this->Html->image('placeholder/video2.jpg');?> </span>
<span> <?php echo $this->Html->image('placeholder/video3.jpg');?> </span>
<span>
<iframe src="https://player.vimeo.com/video/127561?api=1" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</span>
</div>
And Jquery:
var media = $('#media-list img');
var mediaContainer = $('#media-content');
$(media).on('click',function(e){
var vals = $(this).parent().html();
$(mediaContainer).html(vals);
e.preventDefault();
console.log (e.target);
});
And now what this code does:
On clicking on video2.jog or video3.jpg, iframe in <div id="media-content"> is replaced with this clicked image. And this is ok.
But i want to show vimeo movie <div id="media-content"> on click at iframe inside.
So it's simple content swap, but the problem is, that i don't know how "transfer" vimeo iframe do another div, as clicking on it does nothing.
Thank You for any reply.
PS: To address this question, i send image, it shows 3 red spans and one big green div. CLicking on span should set his attr (in this case img).And this work, problem is,that clicking on vimeo span should open video in green div.enter image description here

When the browser loads/makes ready the DOM then iframe isn't included instantly. For the shake javascript or jquery canot get the inside element of the iframe as DOM haven't it, rather javascript or jquery only get the iframe tag.This is a critical and great problem with jquery & iframe when iframe load thing from different domain/host.
You can also get the iframe element by getting the span with jquery. But for this you have to give the 3rd span a a div and have to click on the div not on the iframe content to get desired solution.
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div id="media-content">
<iframe src="https://player.vimeo.com/video/1271?api=1" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>
<div class="media-list" id="media-list">
<span> <?php echo $this->Html->image('placeholder/video2.jpg');?> </span>
<span> <?php echo $this->Html->image('placeholder/video3.jpg');?> </span>
<span >
<div style="border: 1px solid red; z-index:3;width:80px;height:80px;padding:30px;">
<iframe src="https://player.vimeo.com/video/127561?api=1" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</span>
</div>
<script>
$(document).ready(function () {
var media = $('#media-list img');
var mediaContainer = $('#media-content');
$(media).on('click',function(e){
var vals = $(this).parent().html();
$(mediaContainer).html(vals);
e.preventDefault();
console.log (e.target);
});
var media2 = $('#media-list div');
$(media2).on('click',function(e){
var vals = $(this).html();
$(mediaContainer).html(vals).height("70%").width("70%");
e.preventDefault();
console.log (e.target);
});
});
</script>

Storing iframe's id in javascript variable

I was looking for a code like to store iframe's id in javascript's variable inside different divs.
<div id="player">
<iframe id="SAR7KmiCHto" width="560" height="315" src="http://www.youtube.com/embed/SAR7KmiCHto?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>
<div id="player2">
<iframe width="560" height="315" src="//www.youtube.com/embed/9P9JSgZwrjc" frameborder="0" allowfullscreen id="9P9JSgZwrjc"></iframe>
</div>
In above code there are two div ids i.e player and player2. Now I want to store id of iframe from player div in javascript/jquery variable. Need some suggestions.

use jQuery .each() function
var ids = new Array();
$('div[id^=player] iframe').each(function()
{
ids.push($(this).attr('id'));
})
console.log(ids); // output iframe's id array ["SAR7KmiCHto", "9P9JSgZwrjc"]
demo http://jsfiddle.net/L6xsso3t/4/

iframe_ids = $("iframe[id]") will get you a list of iframe elements with id's in jQuery
then you can get the id using iframe_ids[n].id

1) include jquery
2) include this js code
<script>
$(document).ready(function(){
var iframeID1 = $('#player iframe').attr('id');
var iframeID2 = $('#player2 iframe').attr('id');
$('#save_iframeID1').text(iframeID1);
$('#save_iframeID2').text(iframeID2);
});
</script>
in html
<div id="save_iframeID1"></div>
<div id="save_iframeID2"></div>
see
DEMO