I have a string that might contain one or more instances of a YouTube or Vimeo iframe. I am looking for a javascript function that searches through this string, detects the ID of the video in the iframe src, then replaces the existing instances of the iframe with an iframe wrapped in a div.
So input would be:
<p>Interesting text, great, fantastic.</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/EShfC-uhlv8" frameborder="0" allowfullscreen></iframe>
<p>Another great thing</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/umiN04tPpl0" frameborder="0" allowfullscreen></iframe>
Output:
<p>Interesting text, great, fantastic.</p>
<div class="iframe-container">
<iframe src="https://www.youtube.com/embed/EShfC-uhlv8?html5=1" frameborder="0" allowfullscreen></iframe>
</div>
<p>Another great thing</p>
<div class="iframe-container">
<iframe src="https://www.youtube.com/embed/umiN04tPpl0?html5=1" frameborder="0" allowfullscreen></iframe>
</div>
I have tried wrapping my brain around regexp, even with all the examples around I just can't seem to figure out how to do this.
Anyone have a solution?
Copy/pasting the work I am about to reference directly would get me in trouble, so hopefully an explanation of the methodology would be sufficient. ( If it's not, let me know. )
Assuming you have no idea of the names of the iframes, just plop down a getElementsByTagName(iframe) and then iterate over the resulting array with a loop that gathers all the info from the iframe, which you will use to create a replacement element using innerHTML. This replacement element will have you funky iframe wrapped in whatever you want. Finally, we use replaceChild(replacement, original) and you're set.
For example, here is how I create my replacement element:
var replacement = document.createElement("replacement");
replacement.innerHTML =
"<div class=iframe-container>"
+ "<iframe src=https://www.youtube.com/embed/EShfC-uhlv8?html5=1 frameborder=0 allowfullscreen></iframe>"
+ "</div>"
In simpler terms -- write the code as it would look in the .html file.
Another tricky thing you can do is adding IDs to all the elements and just going through them with getElementById, but it seems like a lot of extra work, unless you're the one developing the page and can just ID-entify the iframes.
Let me know how it goes! If anything is unclear, which would be understandable, considering the format I've written all of this in, just let me know and I will help.
PS: I know a lot of people here don't like innerHTML. They are all pansies.
Related
I'm in a situation where I need a substitute for the " " (space) character when writing an <iframe> (without using the forward slash).
<iframe src="\\12341234">
Is there any creative or interesting ideas for getting something like this to work without any spaces at all?
Even better, is there a way to use an iframe like this:
<iframe>
iframecontentshere
</iframe>
Yes as long as you can also run JavaScript. This assumes it is the only iframe in the page:
<iframe></iframe>
<script>document.querySelectorAll('iframe')[0].src="\\12341234";</script>
But this seems dodgy.
Space characters in a URL should be encoded as %20.
<iframe src="data:text/html,<h1>I%20have%20spaces.</h1>"></iframe>
Though to be clear, in this case it isn't required.
The closest you can get to what you shown after is the srcdoc attribute.
<iframe srcdoc="
<h1>Some content</h1>
<p>Directly in the attribute.</p>
"></iframe>
If you wanted to get rid of absolutely all space characters, even the one between the tag name and the attribute, then you'd need to resolve on JS:
<iframe></iframe><script>document.querySelector("iframe").src="data:text/html,<h1>I%20have%20spaces.</h1>";</script>
Sorry if it is a dummy question.
I am trying to make a react website
I have a React function;
{this.state.graphNumber}
which returns a number of index of graphs.
Please see the link below. e.g function returns 111
Update: Sorry it is a embed HTML-Link not a URL link
I need to add that number into a embed html-link for showing correct graph.
<iframe width="100%" height="100%" frameborder="0" scrolling="no" "src=//plot.ly/~username/111.embed?showlink=false&modebar=false&autosize=true" ></iframe>
I search the internet but I could not figure out.
Thank you for advance
If I understand you well, you want a dynamic URL. For that you can try something like that:
<iframe width="100%" height="100%" src={`//.url-is-here/${this.state.GraphNumber}`}></iframe>
Edit: Add brackets around dynamic url, thanks to #DTul comment below.
To clarify - I've built a comment system that sanitizes all HTML and displays it as plaintext to prevent trolling, cross-site scripting, etc.
On top of that, I have javascript that runs after the page loads, and detects DIRECT links to Youtube and Imgur content, then builds the appropriate player/frame/tag to display that content.
Here is my example code:
<div class="video imgur">
https://i.imgur.com/Ym7MypF.jpg
https://www.youtube.com/watch?v=t-ZRX8984sc
</div>
And script:
$('.video').html(function(i, html) {
return html.replace(/(?:https:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, '<iframe width="420" height="345" src="https://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>');
});
$('.imgur').html(function(i, html) {
return html.replace(/(?:https:\/\/)?(?:i\.)?(?:imgur\.com|)\/(.+)/g, '<img src="https://i.imgur.com/$1">');
});
I can get one to work without the other - however - running both on the same page invariably produces broken tags and links like this, depending on the order:
<iframe width="420" height="345" src="https:<img src=" https:="" i.imgur.com="" www.youtube.com="" embed="" t-zrx8984sc"="" frameborder="0" allowfullscreen=""></iframe>
Why won't my code differentiate between Imgur and Youtube and handle them separately? I'm new at Regex and cannot tell what I'm doing wrong. If anyone could sort me out I'd be grateful.
Your Imgur regex matches too many URLs, e.g.:
https://example.com
https://www.youtube.com/watch?v=foobar
https://imgur.com/foobar
Try using this regex instead: /(?:https:\/\/)?(?:i\.)?(?:imgur\.com)\/(.+)/g
There is a iframe fb group like, and need to hide it on click, but jQuery doesnt work
<script>
$(".closeFrame").click(function(){
$("#test").remove();
});
</script>
<div id = "test" class='like-btn'>
<iframe = "#" class="closeFrame" src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fzhelechka&width=51&layout=button&action=like&show_faces=false&share=false&height=65&appId" width="51" height="65" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" ></iframe>
</div>
First of all, you need to understand the difference between the two elements: the button is the one that has to be clicked and the other element (the div or the iframe) is the one that is going to be hidden. It is important to understand this correctly in order to code the script properly.
Javascript code (using jQuery)
$(".hide").click(function () {
$(".elementtohide").hide();
});
See it in action: JSFiddle
Explanation
The idea is to attach an event to the button that has to be clicked in order to receive the user's click (this is made with the jQuery method called .click()). Inside that, we must especify what is going to happen when the click is done, so we make a call to the jQuery method called .hide() in order to hide the element (I have used a div but you can use an iframe or whatever you want).
Note: as mentioned in comments, .hide() and .remove() have different behaviours: the first one just adds the style display: none to the element and the second removes the element from the DOM, which means that if you had to show it again, you would have to create it. Use the one that better fits your needs.
A code like this can work
<div id = "test" class='like-btn'>
<iframe = "#" onclick="this.parentNode.style.display = 'none'" class="closeFrame" src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fzhelechka&width=51&layout=button&action=like&show_faces=false&share=false&height=65&appId" width="51" height="65" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" ></iframe>
</div>
but
When you click into an iframe you will click on another part of the world so will not work so the code above will work only if the element isn't an iframe(if is a DIV can work)
so
the solution should be
<div id = "test" class='like-btn'>
<button onclick="document.getElementById('test').style.display = 'none'" value="Press me" name="closeBtn"/>
<iframe = "#" onclick="this.parentNode.style.display = 'none'" class="closeFrame" src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fzhelechka&width=51&layout=button&action=like&show_faces=false&share=false&height=65&appId" width="51" height="65" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" ></iframe>
</div>
Hi I am working on a project that is based on asp and javascript. Also I am new to both programming languages.
I created a popup window that displays a video. When you hit its "close" button, the popup would close but the audio kept playing in the background.
With this code now my audio stops. But it leads to another issue.
So here is the code.
<iframe id="pict" width="560" height="315" src="somelink" frameborder="0" allowfullscreen></iframe>
I created a javascript variable - to copy the 'iframe src' value to it.
<script type="javascript">
var addurl = document.getElementById('#pict').src;
</script>
Then for 'onclick' in my span, I empty the src (so that the audio stops) and re-add the above variable value back in the src.(so that the user can play the video again in the same session)
onclick= ""$('#pict').attr('src','');
$('#pict').attr('src','"& addurl & "');"" >
I dont think the 'addurl' variable is working correctly here. AS I can't play the video twice in the same session. Its blank the second time.
How can I add iframe (src) value inside a variable??
I would appreciate if I could get any help to solve this problem.
As mentioned in my comment above, you have an extra > that closes your <iframe> before you set you id, width, height and other attributes. You simply need to remove the extra > and all should be fine.
Simple Demo
<iframe> id="pict" width="560" height="315" src="somelink" frameborder="0" allowfullscreen></iframe>
^ - Remove this
<iframe id="pict" width="560" height="315" src="somelink" frameborder="0" allowfullscreen></iframe>
It looks like you also have some extra quotes "" inside of your javascript and miscellaneous &s.
onclick= ""$('#pict').attr('src','');
^^ - Remove the quotes
onclick= $('#pict').attr('src','');
$('#pict').attr('src','"& addurl & "');"" >
^ ------ ^ --- ^^ - Remove the `'`s `&`s and quotes
$('#pict').attr('src',addurl);>
Well, it seems a bit confusing. You have some options here, so I give you a few pointers on how to understand the code better.
If you are working inside the page content, you can insert ASP code like this:
<p>lorem ipsum: "<% =my_value %>" is my value</p>
In your code, it looks, as if you are inside a script block, building a string:
<%
dim some_asp_variable
dim my_value
some_asp_variable = "<p>Lorem ipsum: """ & my_value & """ is my value</p>"
Response.write some_asp_variable
%>
Note, how you have to write double quotes to put one quote in the string. and use & to concatenate the strings.
The part you have given:
onclick= ""$('#pict').attr('src','');$('#pict').attr('src','"& addurl & "');"" >
is correct, but only if you are composing a string in ASP (the second option).