I actually need to disable autoplay on a vimeo iframe embed on a drupal 6 website.
I can't change this settings in the embedmedia module, so I need to use jQuery to do this.
This is the original "src" vimeo content:
<iframe src="http://player.vimeo.com/video/69431566?fullscreen=1&show_title=1&show_byline=0&show_portrait=1&autoplay=1" frameborder="0" style="height: 23vw; width: 100vw;"></iframe>
I override the height and width attributes with jQuery already.
So I try to do the same for "src" but my code replace the "src" content:
$("#media-vimeo-1 iframe").attr('src','autoplay=0');
How can I preserve the other part of src content and only change the autoplay setting ?
The second parameter to attr can be a function that processes the old value to get a new value:
$("#media-vimeo-1 iframe").attr('src', function (index, oldSrc) {
return oldSrc.replace('autoplay=1', 'autoplay=0');
});
You must get the old src, replace the desired parameters, and then change the src
$(document).ready(function() {
var oldSrc = $("#media-vimeo-1 iframe").attr("src"); //Get the src of the iframe
var newSrc = oldSrc.replace("autoplay=1", "autoplay=0"); //Replace "autoplay=1" by "autoplay=0"
$("#media-vimeo-1 iframe").attr("src", newSrc); //Change the src attr to the new value
console.log("Old Src: " + oldSrc);
console.log("New Src: " + newSrc);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="media-vimeo-1">
<iframe src="http://player.vimeo.com/video/69431566?fullscreen=1&show_title=1&show_byline=0&show_portrait=1&autoplay=1" frameborder="0" style="height: 23vw; width: 100vw;"></iframe>
</div>
In your example youre just setting the src attribute to be autoplay=0
What you realistically want to do is grab the current value, replace a value within the string and reassign the value.
Example (There are better ways to do this):
var link = $("iframe").attr('src');
link = link.replace('autoplay=1', 'autoplay=0');
$("iframe").attr('src', link);
Hope this code help you.
var src = $('iframe').attr('src'); <br>
var searchParams = new URLSearchParams(src); <br>
searchParams.set('autoplay','0'); <br>
var newParams = searchParams.toString(); <br>
$('iframe').attr('src', decodeURIComponent(newParams)); <br>
Source code: https://github.com/sendeveloper/stackoverflow/tree/master/javascript_src_autoplay
Related
I want to send a text value from the parent page to the iframe < input >. It's all on the same domain and folder.
Was trying this code:
function addNick(nick) {
var txt = parent.document.getElementById('input').value;
parent.document.getElementById('mess').value = 'to[' + nick + '] ' + txt;
parent.document.getElementById('mess').focus();
}
<iframe src="input.php" name="input" id="input" scrolling="auto"></iframe>
Text is triggered in mess.php to be submitted with link to the above iframe input.
name
which is printed in index.php with js
$(document).ready(function(){
setInterval(function(){//setInterval() method execute on every interval until called clearInterval()
$('#load_posts').load("mess.php").fadeIn("slow");
//load() method fetch data from mess.php page
}, 1000);
});
So basically the addNick code won't work.
Any help will be much appreciated.
FINAL SOLUTION
function addNick(nick) {
var iframe = document.getElementById('iframe');
//the element you want to target:
var mess = iframe.contentWindow.document.getElementById("mess").value += `${nick}, `;
}
So first get the iframe element by id, then target the element within the iframe..
so if input.php has an <h1></h1> tag this will set the innerHTML to what the parameter nick holds..
function addNick(nick) {
var iframe = document.getElementById('iframe');
//the element you want to target:
var mess = iframe.contentWindow.document.getElementsByTagName("H1")[0];
mess.innerHTML = `to ${nick}`
}
On how to access dom of iframe, check out this example:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_element_iframe
Hello I try to modify width attribute for all iframe
here what I did :
var editor = tinymce.get('editor1');
var content = editor.getContent();
content = content.replace(/width=".*?"/ig, 'width="660"');
editor.setContent(content);
It works but my regex will modify all tag which contain width attribute and what I want is only modify iframe width attribute
Here's the solution with regex, but I suggest the other solutions, it's better use the DOM API instead regex.
var str = '<p><iframe src="someurl.com" width="540" height="450" scrolling="yes" style="border: none;"></iframe></p><p> toto </p><p><iframe src="someurl.com" width="540" height="450" scrolling="yes" style="border: none;"></iframe></p>';
str = str.replace(/(<iframe.*?)width="\d+"(.*?<\/iframe>)/gu, '$1width="660"$2');
console.log(str);
I would copy the content into a container element and manipulate the DOM, then copy it back into the editor. Like this:
var editor = tinymce.get('editor1');
var content = editor.getContent();
var container = document.createElement('div');
container.innerHTML = content;
var iframes = container.getElementsByTagName('iframe');
Array.prototype.forEach.call(iframes, function(iframe){
iframe.setAttribute('width','660');
});
editor.setContent(container.innerHTML);
As you use jquery I would go this way :
$('iframe').attr("width", function(index,attr) {
return 600;
});
See : https://jsfiddle.net/vj0ohnav/2/
Basically, what I'm trying to do is I am trying to change an images alt "text".
In other words: I'm trying to do something like this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var num = 0;
setInterval(function(){asdfjkl.InnerHTML="Number: " + num}, 500);
setInterval(function(){num+=1;}, 100);
</script>
</head>
<body>
<image id="asdfjkl" src="asdf.png">Hello!</image>
</body>
</html>
But the script has no effect at all on the image's text. If someone could help that would be awesome, thanks!
The image tag is used inside svg elements, for HTML use img tag and they are self closing tags <img src="" />.
It's not InnerHTML, it is innerHTML and you don't even need to use it in your case.
To set the alt attribute of the img, simply use asdfjkl.alt.
var asdfjkl = document.getElementById('asdfjkl');
var num = 0;
setInterval(function() {
asdfjkl.alt = "Number: " + num
}, 500);
setInterval(function() {
num += 1;
}, 100);
<img id="asdfjkl" src="" alt="Hello!" />
You need to use img tag, instead of image. You cannot use the element id directly like this. Use getElementById("Elem ID Here"). Also innerHTML in your case is with a capitalised i. Use innerHTML not InnerHTML.
To change the alt text, you need to set it first! :)
Set it like this:
<image id="asdfjkl" src="asdf.png" alt="abc">Hello!</image>
Change it like this:
document.getElementById('asdfjkl').alt = 'xyz';
Working Code Snippet:
var image = document.getElementById('asdfjkl');
image.alt = 'xyz';
console.log(image);
<image id="asdfjkl" src="asdf.png" alt="abc">Hello!</image>
For your code, you need to do following 3 things:
Instead of <image> tag use <img> tag.
Wrap your <img> in <figure> and add a <figcaption>.
Instead of fetching the image by ID, fetch the <figcaption> and change its innerHTML.
Thats it!
Working Code Snippet:
var num = 0;
setInterval(function(){document.getElementsByTagName('figcaption')[0].innerHTML="Number: " + num}, 500);
setInterval(function(){num+=1;}, 100);
<figure>
<img id="asdfjkl" src="asdf.png" />
<figcaption>Hello!</figcaption>
</figure>
I have a div that has an img inside it. As those are generated, I want to take the img src and set it in the background property of the outer div.
(I am trying to do a circle image, then followed a tutorial)
I have this.
The JS
<script type="text/javascript">
$(document).ready = (function() {
var someId = $("#someId");
$.each(someId, function(index, value) {
var src = value.find('img').attr('src');
value.css('background', 'url(' + src + ') no-repeat');
});
});
</script>
The HTML
<div class="body">
<h2><img alt="image" src="img-src" /></h2>
</div>
However when I run the site, the background property is not set.
Here is the fiddle.
Few Observations
value inside the handler is not a jQuery object so it won't have methods like find()
document.ready() is a function you need to pass your ready handler as a parameter to it
you can use the .css(property, function(){}) to set the css property
Try
jQuery(function ($) {
var someId = $("#someId");
someId.css('background', function () {
console.log('x')
return 'url(' + $(this).find('img').attr('src') + ') no-repeat'
})
})
Demo: Fiddle
You have syntax errors, missing a }); at the end of the $.each( code.
And logic errors as well. value in your code is going to be the imgs you found via .find(), and you're trying to to take the src of those images and set that as the background of the image...
setting a background on an image makes no sense whatsoever.
I have a function in which when the function is called I need to have text and an image pop up. My javascript is:
function Upload(){
if(value !- ''){
$("#divValue").html("Uploaded: " + //i need to add an image here );
}
So where it says //I need to add an image here, this is where my image, lets say its tire.gif, needs to be added so when the javascript is called it displays the text and image together.
you can use document.createElement method to create a img Object and simply set the source and optional height and width, then add it to your div using "append":
var img = document.createElement('img')
img.src = //URL to your image
$(img).css('width','50px'); //set the width (optional)
$(img).css('height','50px'); //set the height (optional)
//finally append the newly created image object to your "DivValue"
$("#divValue").append(img);
Can you try this,
function Upload(){
var value="some value";
if(value != ''){
$("#divValue").html("Uploaded: <img src='../images/tire.gif' />" );
}
}
It is actually pretty straight forward. You just need to pass the tag inside the string that will replace the html.
Check this jsFiddle
But you just need to do:
$("#divValue").html("Uploaded: <img src=' PATH_TO tire.gif ' /> ");
Watch the difference between " and ' to avoid syntax problems.
Cheers.
You mean like this?
$("#divValue").html('Uploaded: ' + '<img src="image.jpg" alt=""/>');