I have a quite peculiar problem with some jQuery code.
Basically I'm trying to work out a video mirror script where you click on a button and the div should change embed code to another video service. This is my code:
jQuery(function($){
$('#mirror1').click(function(){
$('#player-embed').html($('<div />').append($('#video1').clone()).html());
});
});
This is the code for the button
function mirror1( $atts, $content = null ) {
return '<a class="wpb_button_a" title="Mirror 1" href="#mirror1" id="mirror1">
<spanclass="wpb_button wpb_btn-primary wpb_regularsize">Mirror 1</span></a>
<div id="video1" class="video1">' . $content . '</div>';
My problem is that the output gives excessive " quotations
So all I'm seeing is (on page, not in code)
<iframe frameborder=”0″ width=”480″ height=”270″ src=”videourltest” allowfullscreen> </iframe>
And not the actual video itself.
Thanks in advance.
Your code:
<iframe frameborder=”0″ width=”480″ height=”270″ src=”videourltest” allowfullscreen> </iframe>
Your ” and ″ are typographic quotes and not code quotes, code quotes are straight like "
Try:
<iframe frameborder="0" width="480" height="270" src="videourltest" allowfullscreen> </iframe>
Related
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
I am attempting to use the MaterializeCSS tooltip in oder to display a youtube video. I have set the html attribute in the jQuery to 'true' and added the embedded iframe code into the data-tooltip attribute in the HTML.
I am having issues with the quotes inside of the html iframe code, they are preventing the tags from closing. I tried escaping the quotes with the " syntax but all that did was display the html text instead of actually running the code inside of the tooltip. I've tried single quotes outisde with double quotes on the inside and that only shows a small thin blank box. I'm assuming that means the html is running but not displaying anything. Does anyone know what the problem is?
jQuery
$('.test-tooltip').tooltip({
delay: 50,
html: true,
});
HTML
<a class="test-tooltip" data-tooltip="<iframe width="853" height="480" src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe>"
You can add another div or element as the video container and add it to the popover as a return of a jQuery function.
jQuery:
$('.test-tooltip').popover({
delay: 50,
html : true,
content: $('#youtube_container')
}
});
HTML:
<a class='test-tooltip' data-placement='top' title="Title" href='#'>Click</a>
<div id="youtube_container" style="display: none">
<iframe width="853" height="480" src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
It should work.
I have a Wordpress site and I have a custom field which holds YouTube iframe codes. There is a string holding these iframe codes named $embed. Videos are displayed in the theme with code:
<?php print($embed); ?>
I want to convert my standard YouTube embed codes such that:
Standard Youtube Embed Code:
<iframe width="560" height="315" src="https://www.youtube.com/embed/uxpDa-c-4Mc" frameborder="0" allowfullscreen></iframe>
Converted Format:
<iframe width="560" height="315" src="https://www.youtube.com/embed/uxpDa-c-4Mc?enablejsapi=1&html5=1" frameborder="0" allowfullscreen id="video"></iframe>
Simply, I want to add ?enablejsapi=1&html5=1 to end of URL and add id="video".
How can i obtain this iframe code by manipulating the parameter $embed?
Tnx.
This will add the extra params to the source. (Replace with your current print($embed) code.
// use preg_match to find iframe src
preg_match('/src="(.+?)"/', $embed, $matches);
$src = $matches[1];
// add extra params to iframe src
$params = array(
'enablejsapi'=> 1,
'html5' => 1
);
$new_src = add_query_arg($params, $src);
$embed = str_replace($src, $new_src, $embed);
$embed = str_replace('></iframe>', ' ' . $attributes . '></iframe>', $embed);
print($embed);
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.
I'm trying to play an embedded Youtube video after a button click (.playbutton).
The video is embedded as an iframe within a div named #youtubecontainer.
The easiest way to achieve this is to append '?autoplay=1' to the iframe's src attribute. (I know there is an API, but for now I need to do it this way.)
My HTML code is this
<div class="playbutton">
<img class="playicon">
</div>
<div id="youtubecontainer">
<iframe width="560" height="315" src="//www.youtube.com/embed/XeoFLxN5520" frameborder="0" allowfullscreen></iframe>
</div>
Javascript code
$(function() {
//This controls YouTube playback via button
$('.playbutton').click(function() {
$("#youtubecontainer iframe").attr('src', ($("#youtubecontainer iframe").attr('src') + '?autoplay=1'));
});
});
However, this appends'?autoplay=1' to the src twice, so it reads as follows and fails:
<iframe width="560" height="315" src="//www.youtube.com/embed/XeoFLxN5520?autoplay=1?autoplay=1" frameborder="0" allowfullscreen=""></iframe>
Any ideas why?
Try to replace that autoplay before you add it. Because when you second click on it, you are adding again the ?autoplay=1 what has still there before.
Working DEMO
$("#youtubecontainer iframe").attr('src', $("#youtubecontainer iframe").attr('src').replace(/\?autoplay=1/, "") + '?autoplay=1');
You could try to save the original src of the iframe before the click event:
var source;
$(function() {
//This controls YouTube playback via button
source = $("#youtubecontainer iframe").attr('src');
$('.playbutton').click(function() {
$("#youtubecontainer iframe").attr('src', source + '?autoplay=1');
});
});
Working fiddle: http://jsfiddle.net/robertrozas/notjtz3d/1/