There is youtube short code from using wordpress
[youtube id="YOUTUBE_ID" width="650"]
And I have to replace short code to iframe
<iframe
class="ql-video ql-align-center"
frameborder="0"
allowfullscreen="true"
src="https://www.youtube.com/embed/YOUTUBE_ID?showinfo=0"
>
The iframe is not HTML element tag. This is just string from server database. I'm using with dangerouslySetInnerHTML
The whole string value is like
<p class="ql-align-center"><br></p><p class="ql-align-center">test</p>
<p class="ql-align-center"><br></p>
<iframe class="ql-video ql-align-center" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/embed/YOUTUBE_ID?showinfo=0"></iframe>
<p class="ql-align-center"><br></p>
const originContent = '<div>test</div><h1>test</h1>[youtube id="YOUTUBE_ID" width=650] <p>test</p>'
const youtubeShortCode = '[youtube id="YOUTUBE_ID" width=650]'
const youtubeId = "YOUTUBE_ID"
const content = originContent.replace(youtubeShortCode, `<iframe class="ql-video ql-align-center" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/embed/${youtubeId}?showinfo=0"></iframe>`)
console.log(content)
Actually I don't know how can I get youtubeShortCode and youtubeId
How can I fix it?
You can search the YouTube ID and replace html in just one line code by using String.prototype.replace():
const originContent = '<div>test</div><h1>test</h1>[youtube id="YOUTUBE_ID" width=650] <p>test</p>'
const content = originContent.replace(/\[youtube id=\"([^"]+)\" width=(\d+)\]/i, '<iframe class="ql-video ql-align-center" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/embed/$1?showinfo=0"></iframe>')
console.log(content)
Or, if you just want to get the ID and width, you can match it by using String.prototype.match():
const originContent = '<div>test</div><h1>test</h1>[youtube id="YOUTUBE_ID" width=650] <p>test</p>'
const [, youtubeId, width] = originContent.match(/\[youtube id=\"([^"]+)\" width=(\d+)\]/i)
console.log(youtubeId, width)
Related
I do not know much Javascript and I am trying to pass query string parameters to an embedded iframe.
Here is the url I am trying to retrieve query parameters from:
https://usslc.clickfunnels.com/optin1612360116340?contactId=924408&inf_contact_key=ea845fcb8c29d976c0755e8b56134056cc0558ed5d4c28cbfab114022b1ec50d&inf_field_BrowserLanguage=en-US%2Cen%3Bq%3D0.9&inf_field_FirstName=PG2&inf_field_Email=preston%2Btest2%40behavioralmedia.com&inf_field_Phone1=5554445555
Here is the code I need for the iframe:
<iframe src="https://app.squarespacescheduling.com/schedule.php?owner=21917237&appointmentType=20129186" title="Schedule Appointment" width="100%" height="800" frameBorder="0"></iframe><script src="https://embed.acuityscheduling.com/js/embed.js" type="text/javascript"></script>
This is what I have been working on and not getting any luck with:
<iframe id="myIframe" title="Schedule Appointment" width="100%" height="800" frameBorder="0"></iframe>
<script src="https://embed.acuityscheduling.com/js/embed.js" type="text/javascript">
let myIframe = document.getElementById("myIframe");
let src = "https://app.squarespacescheduling.com/schedule.php?owner=21917237&appointmentType=20129186"
let url = window.location.href;
let name = url.searchParams.get("inf_field_FirstName");
let email = url.searchParams.get("inf_field_Email")
let phone = url.searchParams.get("inf_field_Phone1")
let adsURL = src+"&firstName="+name+"&email="+email+"&phone="+phone;
myIframe.src = adsURL;
</script>
Again, I am a total noob with stuff like this so sorry if this is real bush league.
What is the best way to have the name, phone, and email prepopulate in the iframe?
Thanks!
Accessing an iframe that already exists on the page can be tough, if not impossible.
If you only need to have the desired fields w/ the iframe on page load then you could instead generate the iframe in the script tag and append it to the document like so:
<div id="frameWrapper"></div>
<script>
const url = window.location.href;
const frameWrapper = document.getElementById('frameWrapper');
const BASE_URL = 'https://app.squarespacescheduling.com/schedule.php?owner=21917237&appointmentType=20129186';
const frameElem = document.createElement("iframe");
frameElem.src = `${BASE_URL}` +
`&name=${url.searchParams.get("inf_field_FirstName")}` +
`&email=${url.searchParams.get("inf_field_Email")}` +
`&phone=${url.searchParams.get("inf_field_Phone1")}`;
frameElem.name = url.searchParams.get("inf_field_FirstName");
frameElem.title = "Schedule Appointment"
frameElem.style.height = "100%";
frameElem.style.width = "100%";
frameContainer.appendChild(frameElem);
</script>
In this case we are just replacing the iframe with a wrapper DIV, assembling the iframe in our script tag and appending it to the wrapper.
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.
}
});
I have the following string
"<iframe width="420" height="315" src="https://www.youtube.com/embed/DgPO56ImqUA?showinfo=1" frameborder="0" allowfullscreen></iframe>".
how can i get the value of src using javascript.
You can use a regular expression to pull the src from your string like so:
var myString = '<iframe width="420" height="315" src="https://www.youtube.com/embed/DgPO56ImqUA?showinfo=1" frameborder="0" allowfullscreen></iframe>';
var regex = /<iframe.*?src="(.*?)"/;
var src = regex.exec(myString)[1];
console.log(src);
Give a name to your frame such as
"name="frame1" width=..... />"
then use this
alert(document.frames['frame1'].location.href);
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.
In JS/jQuery, I need to strip a YouTube embed code to reveal just the SRC value. How is this possible?
The embed code, for example:
string = "<iframe width="630" height="354" src="https://www.youtube.com/embed/NYjPglsyYZA?rel=0" frameborder="0" allowfullscreen></iframe>"
I am looking to grab everything between src=" and ". I'm thinking maybe a regular expression will do it but not overly sure...
Any suggestions would be great.
try :
var str='<iframe width="630" height="354" src="https://www.youtube.com/embed/NYjPglsyYZA?rel=0" frameborder="0" allowfullscreen></iframe>';
var src = $(str).attr("src");
In jQuery:
$('iframe:first').attr('src');
In plain JavaScript:
document.getElementsByTagName('iframe')[0].src;
UPDATE
Starting with a string, using jQuery:
string = '<iframe width="630" height="354" src="https://www.youtube.com/embed/NYjPglsyYZA?rel=0" frameborder="0" allowfullscreen></iframe>';
var src = $(string).attr('src');
And without jQuery:
string = '<iframe width="630" height="354" src="https://www.youtube.com/embed/NYjPglsyYZA?rel=0" frameborder="0" allowfullscreen></iframe>';
var div = document.createElement('div');
div.innerHTML = string;
var src = div.firstChild.src;
alert(src);
http://www.w3schools.com/jsref/jsref_match.asp
Try this
var str='<iframe width="630" height="354" src="https://www.youtube.com/embed/NYjPglsyYZA?rel=0" frameborder="0" allowfullscreen></iframe>';
var n=str.match(/src="(.*)"/);
var result = n.substring(5,n.length()-1);