We Keep Coding

I need to open 4 Bootstrap modals (4.1 version) and autoplay a different Vimeo video on each one of them

I've been using this solution by Franceso Borzi:
var videoSrc = $("#myModal iframe").attr("src");
$('#myModal').on('show.bs.modal', function () { // on opening the modal
// set the video to autostart
$("#myModal iframe").attr("src", videoSrc+"&autoplay=1");
});
$("#myModal").on('hidden.bs.modal', function (e) { // on closing the modal
// stop the video
$("#myModal iframe").attr("src", null);
});
FYI: This snippet can be found on this thread: Bootstrap Modals & Youtube: Autoplay and Stop on Close:
It works when there is only one Vimeo video on the page. When I try to open a different video for each modal, the modals only play the latest video on the markup.
This is my code so far:
<div class="modal" data-modal-window id="modal-vimeo-01">
<iframe id="v01" src="https://player.vimeo.com/video/726139458?h=02e309cac8" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
<button data-modal-close class="close" data-dismiss="modal" aria-label="Close"><i class="icofont-close-circled"></i></button>
</div>
<div class="modal" data-modal-window id="modal-vimeo-02">
<iframe id="v02" src="https://player.vimeo.com/video/723317173?h=8ce2334289" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
<button data-modal-close class="close" data-dismiss="modal" aria-label="Close"><i class="icofont-close-circled"></i></button>
</div>
<script>
var videoSrc = $("#modal-vimeo-01 iframe").attr("src");
$('#modal-vimeo-01').on('show.bs.modal', function () { // on opening the modal
// set the video to autostart
$("#modal-vimeo-01 iframe").attr("src", videoSrc+"&autoplay=1");
});
$("#modal-vimeo-01").on('hidden.bs.modal', function (e) { // on closing the modal
// stop the video
$("#modal-vimeo-01 iframe").attr("src", null);
});
</script>
<script>
var videoSrc = $("#modal-vimeo-02 iframe").attr("src");
$('#modal-vimeo-02').on('show.bs.modal', function () { // on opening the modal
// set the video to autostart
$("#modal-vimeo-02 iframe").attr("src", videoSrc+"&autoplay=1");
});
$("#modal-vimeo-02").on('hidden.bs.modal', function (e) { // on closing the modal
// stop the video
$("#modal-vimeo-02 iframe").attr("src", null);
});
</script>
I'm quite new to JS and Jquery, so any help would be much appreciated.
Thanks!

You problem will be most likely that you have 4 modals/videos that have the same class or id. Since I can't see your code I can't tell you where your mistake is, but that will be the problem for sure.
You should try it with having 4 id`s for your modals (like #modal1, #modal2, etc.) and and make sure that you select the correct video source, which you do in the first line:
var videoSrc = $("#myModal iframe").attr("src");
You would need something like
$("#modal1 iframe")
$("#modal2 iframe")
$("#modal3 iframe")
$("#modal4 iframe")
If this is not helping you, then you need to post your code. Because the code you posted is fine.
EDIT:
You are reacreating / overriding the videoSrc variable. You need to use unique names for these.
var videoSrc1 = $("#modal-vimeo-01 iframe").attr("src");
var videoSrc2 = $("#modal-vimeo-02 iframe").attr("src");
var videoSrc3 = $("#modal-vimeo-03 iframe").attr("src");
var videoSrc4 = $("#modal-vimeo-04 iframe").attr("src");

The problem is with the scope of videoSrc
You set the value to src of the iframe of the first video
Then in the second script, you redefine videoSrc to be the src of the second iframe
The scope of videoSrc in both cases is the same.
These are equivalent:
- var videoSrc = “someUrl”;
- window.videoSrc = “someUrl”
So in your second script, videoSrc gets overwritten.
Each modal should have its own uniquely named source variable.
Edit: in order to handle this properly, you would do something like this:
var firstModalSrc = $(firstModalID iframe).attr(src)
$(firstModalID).on(…)
var secondModalSrc = $(secondModalID iframe).attr(src)
$(secondModalD).on(…)
…

javascript turn a YouTube link into embed video

I Have Many Links On My Page All Jotted Around In Random Places. If Have The Links Like This:
https://youtu.be/4tG274QuqHM
or
https://youtube.com/watch?v=4tG274QuqHM
or
Any Other YouTube Video Link Format
Is There Any Way In JavaScript To Get Any Form Of YouTube Link And Turn It Into A YouTube Embed Iframe, By Using JavaScript To Make It End Up Looking Like This;
<iframe width="420" height="345" src="http://www.youtube.com/embed/4tG274QuqHM?autoplay=0&autohide=1&controls=2&rel=0" frameborder="0" allowfullscreen="true"></iframe>
Could Anyone Fix This Code To Make It Work???
$(document).ready(function() {
$('a').each(function() {
var matches = $(this).attr("href").match(/^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/);
if(matches){
$(this).attr("class","youtube-link");
}
});
$('a.youtube-link').each(function() {
var yt_url = this.href,
yt_id = yt_url.split('?v=')[1],
yt_id = yt_url.split('embed/')[1],
yt_title = $(this).text();
$(this).replaceWith('<iframe style="max-width:560px;max-height:315px;" width="600" height="600" src="http://www.youtube.com/embed/' + yt_id + '?rel=0" frameborder="0" allowfullscreen></iframe>');
});
});

I would check this link out. It's Google's documentation on a Youtube iFrame.
https://developers.google.com/youtube/player_parameters#Embedding_a_Player

You can simply extract the href value on click on the anchor tag and replace the existing anchor tag with a iframe tag.
https://youtube.com/watch?v=4tG274QuqHM
<br>
http://www.youtube.com/embed/XGSy3_Czz8k
<script>
$('a').click(function(e)
{
var target = $(this).attr('href');
var iframe = $('<iframe/>',{ width: "420", height: "315" , src : target});
$(this).replaceWith(iframe);
e.preventDefault();
});
</script>
Example : https://jsfiddle.net/4nqhqu03/

Random URL for Iframe on page load

i'm trying to load random iframe on my website
i got a script
var cat1 = [
"http://arborjs.org",
"http://cartodb.com",
"http://vis4.net/labs/185"
];
var myFrame = document.getElementById("frame");
function getRandomUrl(myFrame) {
var index = Math.floor(Math.random()*cat1.length);
var url = cat1[index];
myFrame.src = url;
}
btn.addEventListener("click", function() {
getRandomUrl(myFrame);
});
<button id="btn">Click</button>
<br>
<iframe id="frame" src="" style="width:200px; height: 200px"></iframe>
It works fine when i click the button,
but i also want to load random iframe when the page finishes to load.
Can anyone edit this code for me ?
thank you

widnow.onload is your friend in this case:
window.onload = function(){
getRandomUrl(myFrame);
};

Random websites not display on iframe

This code is generating a random link from variable but that link is not opening in iframe I need to display random links in iframe whenever the button is clicked. How to do that?
<html>
<script>
var cat1 = [
"http://arborjs.org",
"http://cartodb.com",
"http://vis4.net/labs/185"
];
var myFrame = document.getElementById("frame");
getRandomUrl(myFrame);
function getRandomUrl(myFrame) {
var index = Math.floor(Math.random()*cat1.length);
var url = cat1[index];
document.getElementById('frame').src = url;
}
btn.addEventListener("click", function() {
getRandomUrl(myFrame);
});
</script>
<body>
<button id="btn">Click</button>
<br>
<iframe id="frame" src="" style="width:500px; height: 500px"></iframe>
</body>
</html>

You have to put the script tag after all your HTML or wait for the window to load.
Also, you're calling a function before it's defined.
This code is generating a random link from variable
I don't think this is happening, if you open your console it should tell you the function and iframe are both undefined, as I stated above.

Rendering Youtube Video in a WYSIWYG

I am creating a custom WYSIWYG from scratch using JavaScript. All of it is working fine (like inserting pictures), but when I click on submit and the content gets added to my database, the YouTube video gets inserted like this:
<div><br></div><div><br><div><br></div></div>
I have created a JavaScript file that the WYSIWYG parses to:
function iImage(){
var imgSrc = prompt('Enter image location', '');
if (imgSrc != null){
richTextField.document.execCommand('insertimage', false, imgSrc);
}
}
function iVideo(){
var urlPrompt = prompt("Enter Youtube Url:", "http://");
var urlReplace = urlPrompt.replace("watch?v=", "embed/");
var embed = '<iframe src="'+urlReplace+'" allowfullscreen="true" width="480" frameborder="0" height="390">';
if($.browser.msie){
richTextField.document.createRange().pasteHTML(embed);
}else{
richTextField.document.execCommand("Inserthtml", false, embed);
}
}
function submit_form(){
var theForm = document.getElementById("blogForm");
theForm.elements["blogbody"].value = window.frames['richTextField'].document.body.innerHTML;
theForm.submit();
}
You can see that my iImage function works, but not my iVideo.
Can anyone help?
Just to let you know i have edited my script to this...
function iVideo(){
var urlPrompt = prompt("Enter Youtube Url:", "http://");
var urlReplace = urlPrompt.replace("http://www.youtube.com/watch?v=", "http://www.youtube.com/embed/");
var embed = '<iframe src="'+urlReplace+'" allowfullscreen="true" width="480" frameborder="0" height="390"></iframe>';
if($.browser.msie){
richTextField.document.createRange().pasteHTML(embed);
}else{
richTextField.document.execCommand("Inserthtml", false, embed);
}
}
but still no joy

I have got it. This is the code below
function iVideo(){
var urlPrompt = prompt("Enter Youtube Url:", "http://");
var urlReplace = urlPrompt.replace("watch?v=", "embed/");
var embed = '<iframe title="YouTube video player" src="'+urlReplace+'" allowfullscreen="true" width="480" frameborder="0" height="390">';
if(embed != null){
richTextField.document.execCommand("Inserthtml", false, embed);`
}
}
It working on my sites right now.

Ultimate
The reason you don't see a Youtube.com is because it will be added by you upon uploading. In the form where you write content you intend to upload to your site, You are to click on a Add Video link which will tricker off the first line in the code to popup a window requesting you to submit your Youtube video link, which looks something like http://youtube.com/theVideoLink. The link you add will then be placed where you have src="'+urlReplace+'" that is.

Well, I am a begginner at javascript, but I don't see anywhere were it adds youtube.com to it, all I see is the watch?v=.
As I said, a beginners opinion.

Are you able to first try a hardcoded/static version like below first?
- might be just syntax or one of your variables not set.
<script type="text/javascript">
function iVideo(){
var youtubeiframe='<iframe type="text/html" width="640" height="385" src="http://www.youtube.com/embed/AsbagZvkrbo" frameborder="0"></iframe>';
richTextField.document.execCommand ("insertHTML", false, youtubeiframe);
}
</script>