Find <iframe> width and height - javascript

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>

Related

How to convert value assigned to variable as String

I have limited knowledge of javascript,so hoping someone can help.
Tried w3 schools & stacko using Document.
This is a dumb question.
We receive a variable value that outputs string without quotes.The string has spaces.
In the example below is it possible to add quotes to my string.
how do i use a input value without quotes and parse it as string?
myvar = John doe
is it possible to add Quotes to a value assigned to a variable?
<html>
<body>
<div id="param">my string</div>
<div id="base64param"></div>
<div id="encodeparam"></div>
<div id="myframe"</div>
<div id="myframe2"</div>
<iframe id="myframe" src="" width="400" height="800" frameborder="0">
</iframe>
<script>
window.onload = function myFunction() {
var str = document.getElementById("param").innerHTML;
var base64param = window.btoa(str);
document.getElementById("base64param").innerHTML = "base64:" + base64param;
var encodeparam = encodeURIComponent(str);
document.getElementById("encodeparam").innerHTML = "encoded:" + encodeparam;
var appurl = "http://localhost/index.jsp?param=";
var furl = appurl + str;
document.getElementById("myframe").innerHTML = "URLwithout encode:" + furl;
var burl = appurl + base64param;
document.getElementById("myframe2").innerHTML = "URLwith encode:" + burl;
}
</script>
</body>
</html>
If you have an existing variable, and want to add quotes:
var varWithQuotes = "\"" + oldVar + "\"";
The slash is an escape character and the plus sign is how to concatenate strings.

Getting Facebook video ID using jQuery

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.
}
});

Jquery append html, not variable name

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.

Javascript replace using regular expression

I need replace url from a string.
example:
var container = "hello http://www.youtube.com/watch?v=r94hrE10S84 hello";
I want replace to:
container = "hello <iframe src='//www.youtube.com/embed/r94hrE10S84' </iframe> guys";
Im trying to do:
container = container.replace("http://www.youtube.com/watch?v=(/\w*\d+\w*/)","<iframe src='//www.youtube.com/embed/$1' </iframe>");
thank you
container.replace(/(https?:\/\/\S+)/i, "<iframe src='$1' </iframe>");
You can use:
repl = container.replace(/(https?:\/\/\S+)/i, function(m) {
if (m.indexOf(".youtube."))
return m.replace(/^(.+?)\/watch\?v=(.+)$/, "<iframe src='$1/embed/$2'> </iframe>");
else return m;
});
//=> ello <iframe src='http://www.youtube.com/embed/r94hrE10S84'> </iframe> hello
(?:https?://)?(?:www\.)?youtu(?:be\.com/watch\?(?:.*?&(?:amp;)?)?v=|\.be/)([\w‌​\-]+)(?:&(?:amp;)?[\w\?=]*)?
ID Should be on first group.
So your code will be like:
var container = "http://www.youtube.com/watch?v=r94hrE10S84";
var reg = /(?:https?:\/\/)?(?:www\.)?youtu(?:be\.com\/watch\?(?:.*?&(?:amp;)?)?v=|\.be\/)([\w‌​\-]+)(?:&(?:amp;)?[\w\?=]*)?/;
container = container.replace(reg,"<iframe src=\"//www.youtube.com/embed/$1\"></iframe>");
This take into account even link w/o www, w/o protocol and short links (youtu.be)
Fiddle
Source

Why am i getting this missing } after property list error? :(

I know this is something easy but I just can't see it. Can anyone tell me why I am getting the error "missing } after property list" for the following code:
<script type="text/javascript">
$(".single_image").live("click", function() {
jwplayer().load({
file: 'utubeurl'
});
});​
</script>
the whole of the code is shown below:
$(xml).find('item').each(function(i){
var current=$(this);
var ttl=current.find('title:first').text();
var thum=current.find('thumbnail:first').text();
var cat=current.find('category:first').text().split(',');
var desc = current.find('description:first').text();
var utubeurl = current.find('youtubeurl:first').text();
var fbshareurl = current.find('facebookshareurl:first').text();
var twturl = current.find('twitterurl:first').text();
var nbcurl = current.find('nbcsiteurl:first').text();
var item = {
title:ttl,
thumbnail:thum,
category:cat,
description:desc,
youtubeurl:utubeurl,
facebookshareurl:fbshareurl,
twitterurl:twturl,
nbcsiteurl:nbcurl,
obj:$('<div class="'+options.itemClass+'"><a id="'+parentId+'" class="single_image" title="'+desc+'"><script type="text/javascript"> $(".single_image").live("click",function(){ jwplayer().load({file:'+utubeurl+'}); }); </script><img src="'+thum+'" /></a><div class="show_lightbox_title"><strong>'+ttl+'</strong></div><ul id="social"><li><iframe src="'+fbshareurl+'" class="iframe_style" scrolling="no" frameborder="0" allowtransparency="true"/></li><li><a class="twtbtn" href="'+twturl+'" target="_blank"><img src="images/twitter_btn.gif"></a></li><a class="nbcbtn" href="'+nbcurl+'" target="_blank"><img src="images/showPages_btn.gif"></a></div>')
};
shows.push(item);
});
You need to quote your property value, here:
obj:$('<div class="'+options.itemClass+'"><a id="'+parentId+'" class="single_image" title="'+desc+'"><script type="text/javascript"> $(".single_image").live("click",function(){ jwplayer().load({file:'+utubeurl+'}); }); </script><img src="'+thum+'" /></a><div class="show_lightbox_title"><strong>'+ttl+'</strong></div><ul id="social"><li><iframe src="'+fbshareurl+'" class="iframe_style" scrolling="no" frameborder="0" allowtransparency="true"/></li><li><a class="twtbtn" href="'+twturl+'" target="_blank"><img src="images/twitter_btn.gif"></a></li><a class="nbcbtn" href="'+nbcurl+'" target="_blank"><img src="images/showPages_btn.gif"></a></div>')
...this:
'... jwplayer().load({file:'+utubeurl+'}); ...'
...needs to be:
'... jwplayer().load({file:"'+utubeurl+'"}); ...'
...note the extra quotes. Not sure if adding those quotes will break your looooooooong (difficult to read/support) string, you might need to escape them. But you get the idea?
Cheers
Try putting the file property under quote marks , like so:
function () {
'file' : 'utubeurl'
}
--EDIT:
My bad , forget it , I was confusing with json, jquery and maybe some other j out there, you're definning a property , no need to make the name of the memory slot a string .
When I copy and paste that block of code, I see an extra character trailing the second closing });
Removing that executes fine in console for me, so if that is not the source of the error I would look elsewhere on the page.
Is the page publicly accessible?
Solved the problem by passing a variable through href and then passing it into the command to play the url.
var item = {
title:ttl,
thumbnail:thum,
category:cat,
description:desc,
youtubeurl:utubeurl,
facebookshareurl:fbshareurl,
twitterurl:twturl,
nbcsiteurl:nbcurl,
obj:$('<div class="'+options.itemClass+'"><img src="'+thum+'" /><div class="show_lightbox_title"><strong>'+ttl+'</strong></div><ul id="social"><li><iframe src="'+fbshareurl+'" class="iframe_style" scrolling="no" frameborder="0" allowtransparency="true"/></li><li><a class="twtbtn" href="'+twturl+'" target="_blank"><img src="images/twitter_btn.gif"></a></li><a class="nbcbtn" href="'+nbcurl+'" target="_blank"><img src="images/showPages_btn.gif"></a></div>')
};
shows.push(item);
});
setSetter();
}
});
}
utubeurlParser = function(url){
jwplayer().load({file: [url]});}

Categories