Hei
I am using angular and trying to implement iframe in it . I'ave tried many ways to insert longitude and latitude which are coming from database but whenever try to write something like this I get error.
what I tried
<iframe width="100%" height="250" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q={{product.mall.lat}},{{product.mall.long}}&key= key" allowfullscreen></iframe>
I get this error when i tried the above way
[$interpolate:noconcat]
Normal iframe
<iframe width="100%" height="250" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=40.7127837,-74.0059413&key= Akey" allowfullscreen></iframe>
use ng-src instead of src.
you cannot concatenate the URL inside the source attribute for security reasons: you must concatenate the URL in Javascript in a scope variable e.g. fullURL and then ng-src="{{fullURL}}".
if Strict Contextual Escaping (SCE) is enabled ‒ and Angular v1.2 ships with SCE enabled by default ‒ you need to whitelist the URLs.
Reference 1
Angular js scope var value in iframe
Its already been answered in another Question
AngularJS multiple expressions concatenating in interpolation with a URL
More details
Strict Contextual Escaping
This is What My Mentor did
In my controller function where I was getting long & lat He did something like this
$scope.single_product = function (product_id) {
$http.get('url' + product_id + '?expand=product_variants,product_variant_options,photos,shop,mall',
{headers:
{'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': $rootScope.keyword_auth_token}
})
.success(function (data) {
$scope.product = data;
$scope.photo = $scope.product.photos; //Storing photos in phot object
for (var i = 0; i < $scope.photo.length; i++) {
slides.push({path: $scope.photo[i].path, id: currIndex++}); //I already mentioned slides as an array
}
console.log(slides);
console.log($scope.product);
var compile_map = '<iframe width="100%" height="250" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q='+$scope.product.mall.lat+','+$scope.product.mall.long+'&key= AIzaSyCaG_LpOazepPve-DlVH1TuxxkBVseOGd0" allowfullscreen></iframe>';
angular.element($document[0].querySelector('#map_image')).append(compile_map); //This function will run only and load the html if it has long and lat
})
.error(function (data) {
console.log(data);
});
};
and then in html simply that
<div id="map_image"></div>
It works like a charm
Now its work, you need to wrap url into a method, that make it as a trusted url source
in html
<iframe width="100%" height="250" frameborder="0" style="border:0" ng-src='{{getTrustedUrl("https://www.google.com/maps/embed/v1/place?q="+product.mall.lat+","+product.mall.long+"&key=AIzaSyCaG_LpOazepPve-DlVH1TuxxkBVseOGd0")}}' allowfullscreen>
</iframe>
add this function to your controller
$scope.getTrustedUrl = function(src) {
return $sce.trustAsResourceUrl(src);
}
Related
The Youtube player loads correctly, but the videos display a playback error when hitting play, and thumbnails do not load either. Could someone point out what I might be doing wrong.
$(document).ready(function(){
var API_KEY = ""; // Did not include API here but I have it included it my code
var search = "soccer";
var video = '';
videoSearch(API_KEY, search);
function videoSearch(API_KEY, search){
$.get("https://www.googleapis.com/youtube/v3/search?key=" + API_KEY
+ "&type=video&part=snippet&maxResults=12&q=" + search, function(data){
console.log(data);
data.items.forEach(item => {
video = `
<iframe width="420" height="315" src="http://www.youtube.com/embed/$(item.id.videoId)" frameborder="0" allowfullscreen></iframe>
`
$("#videos").append(video);
});
})
}
})
Try replacing your colons with braces.
e.g. $(item.id.videoId) to ${item.id.videoId}
I have an object like this:
object = {
iframe: "<iframe width="560" height="315" src="YouTube link"></iframe>"
}
I need to take the width (in this case 560) and height (in this case 315) value inside this with jQuery/js. Because I need to use this value.
Is that possible?
Thank you.
You can use regex to isolate the two parameters:
var object = {
iframe: '<iframe width="560" height="315" src="YouTube link"></iframe>' // string was invalid before, replaced quotes with apostrophes
}
var regexFound = object.iframe.match(/width="(\d*?)" height="(\d*?)"/);
var asArray = [regexFound[1], regexFound[2]];
var asObject = {width: regexFound[1], height: regexFound[2]}
console.log(asArray, asObject);
Firstly note that the string in the example is invalid due to the repeated use of ". To make the string valid, delimit it with ' and use " to contain the attribute values within it.
As you've tagged the question with jQuery you can use that to build an object from the string instead of parsing it using regex:
let object = {
iframe: '<iframe width="560" height="315" src="YouTube link"></iframe>'
}
let $iframe = $(object.iframe);
console.log($iframe.prop('width'));
console.log($iframe.prop('height'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I've made a script that gets the ID for YouTube and Vimeo, but I am not sure how to get the ID from the Facebook embed URL.
Example embed:
<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FHammers.Serbia.Official%2Fvideos%2F1261009690594307%2F&show_text=0&width=560" width="560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
I need to get the ID which in this case is: 1261009690594307
How can I it with YouTube? I am new to JS so not sure how to replicate but getting the ID for this one.
$.each($('iframe[src*="youtube.com"]'), function() {
var player = $('<div class="video-player">');
var id = $(this).attr('src');
id = id.substr(id.lastIndexOf("/")+1);
player.attr('data-id', id);
player.html(videoThumbYT(id));
player.on('click', videoIframeYT);
var videoContainer = $('<div class="video-container">');
videoContainer.append(player);
$(this).replaceWith(videoContainer);
});
Fastest using the Regular Expressions.
function fbvideoID(frame) {
var myRegexp = /2F(\d+)%/g;
var match = myRegexp.exec(frame);
return match[1];
}
var facebookVideo = '<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FHammers.Serbia.Official%2Fvideos%2F1261009690594307%2F&show_text=0&width=560" width="560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>';
document.write(fbvideoID(myString)); //returns ID 1261009690594307
Explanation
Regular Expression
/2F(\d+)%/g
Selects the ID. Test it here!
var match = myRegexp.exec(frame);
Returns array of two elements. Documentation here.
0: "2F1261009690594307%"
1: "1261009690594307"
The 0 index is always the whole expression. The 1 is only the (\d+) - braces. Which contains our ID.
Hope I helped you!
Here's one approach, could be refined a bit.
$.each($('iframe[src*="facebook.com/plugins/video"]'), function() {
var url = decodeURIComponent($(this).attr('src'));
var id = url.match(/\/\d+\//);
if (id) {
id = id.slice(1,-1);
console.log(id);
//do your player stuff here.
}
});
If I have a playlist url, say "https://www.youtube.com/playlist?list=PLRU-B1PBK4Buu_yoMI8V-eTel9O3gVMpB" and I put it in an iframe with:
<iframe src="http://www.youtube.com/playlist?list=UUK376qNDlNZZDNHsnaWuTeg" width ="1920" height="1080"></iframe>
I get a blank iFrame, so how do I fix that? Also, I only want to display the "pl-video-list" div, not the rest of the web page. The other responses on stackoverflow were all website specific, or didn't seem to work.
Another option extract playlist using JQuery
<script>
var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/UUK376qNDlNZZDNHsnaWuTeg?v=2&alt=json&callback=?';
var videoURL= 'http://www.youtube.com/watch?v=';
$.getJSON(playListURL, function(data) {
var list_data="";
$.each(data.feed.entry, function(i, item) {
var feedTitle = item.title.$t;
var feedURL = item.link[1].href;
var fragments = feedURL.split("/");
var videoID = fragments[fragments.length - 2];
var url = videoURL + videoID;
list_data += '<br><br>'+ feedTitle+'';
});
$(list_data).appendTo(".playlist");
});
</script>
<ul class="playlist"></ul>
http://jsfiddle.net/jamie8763/g5unx78b/
This probably isn't the answer your were looking for but <iframe width="560" height="315" src="http://www.youtube.com/embed/videoseries?list=PLRU-B1PBK4Buu_yoMI8V-eTel9O3gVMpB" frameborder="0" allowfullscreen></iframe> allows you to view the first video in the playlist with a dropdown to view the rest of the playlist.
As for your blank iframe, I am getting the following error when I try it.
Refused to display
'https://www.youtube.com/playlist?list=PLRU-B1PBK4Buu_yoMI8V-eTel9O3gVMpB'
in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
As far as I know, there isn't a way to scecify a certain div to display in an iframe. It's either all or nothing.
I need to append the vidyourl3, but my script keeps adding vidyourl3 name only. Where am I doing a mistake ?
var vidyourl3 = '<iframe id="vide3" width="255" height="195"
src="http://www.youtube.com/embed/Nficz8WZwrk?wmode=opaque" frameborder="0"
allowfullscreen></iframe>';
kacki = 3;
$("#vidgelcekburaya").html("vidyourl"+kacki);
If you have multiple urls then create an object to hold those references as given below
var urls = {
vidyourl3: '<iframe id="vide3" width="255" height="195"
src="http://www.youtube.com/embed/Nficz8WZwrk?wmode=opaque" frameborder="0"
allowfullscreen></iframe>'
}
then use the object key along with bracket notation to access the value
kacki = 3;
$("#vidgelcekburaya").html(urls["vidyourl"+kacki]);
You're putting a literal string in your html. Take the quotes off of your vidyourl and it will work:
$("#vidgelcekburaya").html(vidyourl3 + kacki);
Another problem which is hard to decide what you're trying to do is; your first variable is called vidyourl3, while you then put in vidyourl in your html replace. Which one should it be?
Try:
window.vidyourl3 = '<iframe id="vide3" width="255" height="195"
src="http://www.youtube.com/embed/Nficz8WZwrk?wmode=opaque" frameborder="0"
allowfullscreen></iframe>';
kacki = 3;
$("#vidgelcekburaya").html(window["vidyourl"+kacki]);
If your variable needs to be in the local scope, try
var vidyourl3 = '<iframe id="vide3" width="255" height="195"
src="http://www.youtube.com/embed/Nficz8WZwrk?wmode=opaque" frameborder="0"
allowfullscreen></iframe>';
kacki = 3;
$("#vidgelcekburaya").html(eval("vidyourl"+kacki));
I wouldn't use this method, because eval can be kind of scary.