I want multiple SoundCloud widgets to play simultaneously on the same page - javascript

I have two soundcloud widgets hidden on my page. I have linked them to divs that act as play buttons. Currently, when the first div is clicked, the first sound starts. When the second div is clicked, the second sound starts and the first sound is automatically paused. I want the sounds to play simultaneously.
<div id = "bgSound">
<iframe id = 'first' width="0" height="0" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/257485031?secret_token=s-i9opu&color=ff5500&inverse=false&auto_play=false&show_user=true"></iframe>
<iframe id = "second" width="0" height="0" scrolling="no" frameborder="no" src="https://api.soundcloud.com/tracks/257498359?secret_token=s-c9D5D&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
var widget1 = SC.Widget('first');
var widget2 = SC.Widget('second')
$('.Top-Left').click(function() {
widget1.play();
});
$('.Top-Center').click(function() {
widget2.play();
});

You should be able to use single_active=false to ensure both can play at the same time, otherwise one will pause the other when it starts playing.
<div id = "bgSound">
<iframe id="first" width="0" height="0" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/257485031?secret_token=s-i9opu&color=ff5500&inverse=false&auto_play=false&show_user=true&single_active=false"></iframe>
<iframe id="second" width="0" height="0" scrolling="no" frameborder="no" src="https://api.soundcloud.com/tracks/257498359?secret_token=s-c9D5D&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true&single_active=false"></iframe>
</div>
var widget1 = SC.Widget('first');
var widget2 = SC.Widget('second')
$('.Top-Left').click(function() {
widget1.play();
});
$('.Top-Center').click(function() {
widget2.play();
});
SoundCloud Widget Parameter Documentation

Related

How to use the same iframe script with multiple sources?

First of all I'm a total noob so code might be harsh.
With that said, I have a page with several images (thumbnails) that I want to make clickable so that they enlarge and display their own embedded YouTube video. I use Magnific Pop-Up for the aesthetic of the whole thing.
I succeeded in doing exactly what I want but it obviously only works for one source, so I'd like to know what's the best way to have a unique script targetting several sources (depending on the clicked item)?
Here's an example (all sensitive values are redacted for privacy reasons):
$('.container').on('click', function () {
$.magnificPopup.open({
items: {
src: '<iframe width="560" height="315" src="https://www.youtube.com/embed/video-url" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
type: 'iframe'
}
});
});
<div class="container">
<img src="thumbnail.jpg" alt="Video 1">
<a target="_blank" rel="noopener noreferrer">
<div class="overlay"></div>
</div>
The iframe is in the script because otherwise it'd clearly display both the images and the embedded players in an unordoned manner, and I want the embedded player to stay hidden unless an image is clicked, only then the popup opens and display the YouTube player.
Thanks in advance for your help!
EDIT: Each image matches a single embedded video, on click it's not supposed to play a random video, only the corresponding one.
For creating one image for one video and specific url, you also need a div for each of them.
Here, I have created an array of objects in javascript named links, which contains all the information about each video and It'll append that to the main div, content.
In simple words:
I created an array named links which contains objects, with information about each video:
var links = [{
thumbnail: "thumbnail.jpg",
url: "url",
alt: "alt"
}, {
thumbnail: "thumbnail2",
url: "url2",
alt: "alt2"
}]
I created a parent div, which'll contain all images, <div id="content"></div>.
Using for loop and jquery(.append property), I added elements in parent div with unique Id for each, to access it later:
//access each element of links array one by one
for (var i = 0; i < links.length; i++) {
//"id=${i}" is unique id for each div, it also matches with specific element in array.
//For ex: 2nd element of array will get "id=1"...
$('#content').append(`<div class="container" id="${i}">
<img src="${links[i].thumbnail}" alt="${links[i].alt}">
<a target="_blank" rel="noopener noreferrer">
<div class="overlay"></div>
</div>`);
}
Whenever any element with "container" class is clicked, it'll get the id of the element using var id = $(this).attr('id'); and open link using "magnificpopup" for the div of specific Id:
$.magnificPopup.open({
items: {
src: `<iframe width="560" height="315" src="${links[id].url}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`,
type: 'iframe'
}
});
Note: Here, links[id].url is url of element with specific Id, which we had assigned to each element while creating it in step 3. Since, we had assigned the Id according to the number of element, like 2nd element as id 1, we directly accessed it here using its position in array.
Final code:
var links = [{
thumbnail: "thumbnail.jpg",
url: "https://www.youtube.com/embed/video-url-1",
alt: "Video 1"
}, {
thumbnail: "thumbnail-2.jpg",
url: "https://www.youtube.com/embed/video-url-2",
alt: "Video 2"
}, {
thumbnail: "thumbnail-3.jpg",
url: "https://www.youtube.com/embed/video-url-3",
alt: "Video 3"
}]
for (var i = 0; i < links.length; i++) {
$('#content').append(`<div class="container" id="${i}">
<img src="${links[i].thumbnail}" alt="${links[i].alt}">
<a target="_blank" rel="noopener noreferrer">
<div class="overlay"></div>
</div>`);
}
$('.container').on('click', function() {
var id = $(this).attr('id');
$.magnificPopup.open({
items: {
src: `<iframe width="560" height="315" src="${links[id].url}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`,
type: 'iframe'
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content"></div>

How to prevent one iframe from working under another?

I'm using an iframe video system with tabs to separate them, the problem I had was that all iframes loaded when you entered that section. I found this answer among many others that could not solve the problem of simultaneous loading To Load a video embed using "onclick" function to optimize a web page but now the problem I have is that using the solution by jquery to choose option 1 (iframe) loads normally but if I press option 2 both continue loading, ie, option 1 continues loading under the other that was pressed.
The system where I'm applying it is Datalife Engine on a .tpl file, and jquery 1.8.2 that I can change it to a more current one but the result is the same
<script>
$(document).ready(function() {
$("#myButton").on("click", function() {
var $iframe = $("#myIframe");
$iframe.attr("src", "https://www.youtube.com/embed/6wUxpFu9Wvo");
$iframe.show();
});
});
$(document).ready(function() {
$("#myButton1").on("click", function() {
var $iframe = $("#myIframe");
$iframe.attr("src", "https://www.youtube.com/embed/6wUxpFu9Wvo");
$iframe.show();
});
});
</script>
<script language="javascript" type="text/javascript">
$(function(){
$('.close').click(function(){
$('iframe').attr('src', $('iframe').attr('src'));
});
});
</script>
<iframe id="myIframe" width="560" height="315" style="display:none;" src="" frameborder="0" allowfullscreen></iframe>
<button id="myButton" class="close">Load video</button>
<iframe id="myIframe1" width="560" height="315" style="display:none;" src="" frameborder="0" allowfullscreen></iframe>
<button id="myButton1" class="close">Load video</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The final result is that option 1 is still loading below another option, I was trying options to reload iframes but those who bring videos with autoplay continue to load below the new chosen one
You can use the same iFrame and change it's src on click of several buttons.
Following is an example similar to yours with one iFrame and 3 buttons. Each button loads a different video in the same iFrame. I am using youtube video id to differentiate the videos.
$(function() {
$(".myButton").on("click", function() {
var videoId = $(this).data('video-id');
var $iframe = $("#myIframe");
$iframe.attr("src", "https://www.youtube.com/embed/" + videoId);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe id="myIframe" width="560" height="315" src="" frameborder="0" allowfullscreen style="border: 1px solid black;"></iframe>
<br />
<button id="button1" class="myButton" data-video-id="6wUxpFu9Wvo">Load video 1</button>
<button id="button2" class="myButton" data-video-id="z5jnpb_lp4w">Load video 2</button>
<button id="button3" class="myButton" data-video-id="6wUxpFu9Wv2">Load video 3</button>

How to access event "onplay()" for iframe?

I have two iframes in one page.
<iframe id="video" width="420" height="315" src="//www.youtube.com/embed/9B7te184ZpQ?rel=0" frameborder="0" allowfullscreen></iframe>
<iframe id="video1" width="420" height="315" src="//www.youtube.com/embed/9B7te184ZpQ?rel=0" frameborder="0" allowfullscreen></iframe>
I want to access onplay() event of iframe, then i can able to stop second video(#Video1) while playing first one(#Video) and Stop first video(#Video) when playing Second(#Video1).
It is possible using YoutubeAPI but i do not want to use that because i have other url videos not Youtube videos(here i put youtube links instead orignal links to avoid copyright). Is there another way except YoutubeAPI. YoutubeAPI is not working on another link resources. Please Suggest.
It has two <iframe>. First, you need switch between iframe.
Is there a way to change context to iframe in javascript console?
After, here my code how to access to event onPlay() of <iframe>
<script src="https://www.youtube.com/iframe_api"></script>
<div class="module module-home-video">
<span class="module-strip">Latest Product Video</span>
<div id="video"></div>
</div>
<script>
var player, playing = false;
function onYouTubeIframeAPIReady() {
player = new YT.Player('video', {
height: '360',
width: '640',
videoId: 'xmhtV4270NU',
events: {
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange(event) {
if(!playing){
alert('onPlay is clicked');
playing = true;
}
}
</script>

fullPage.js not detecting height of dynamic generated content when using scrollOverflow

I am using fullpage.js for my website. About fullpage.js everything working fine. I want to open an div on click of pagniation. I am able to open div on click which contains YouTube video. But when div is visible browser scroll will be disabled I am not getting where I go wrong.
here is sample of my code:
$(document).ready(function() {
$('#fullpage').fullpage({
verticalCentered: false,
css3:false,
navigation: true,
normalScrollElements: '.text',
navigationTooltips: ['tooltip1', 'tooltip2', 'tooltip3'],
onLeave: function(index, nextIndex, direction){
var prevIndex = index - 1;
var currentIndex = nextIndex - 1;
$('#section'+currentIndex).css('transform', 'scale(1.2)');
$('#section'+currentIndex).css('transition', 'all 5s ease-in');
setTimeout(function(){
$('#section'+prevIndex).css('transform', 'scale(1)');
$('#section'+prevIndex).css('transition', 'all 0.2s ease-in');
},500);
},
});
});
in jquery.fullpage.js
var li = '<li><span>' + tooltip + '</span>';
function :
function displayDetails(id)
{
$('#text').show();
}
HTML code:
<style>
#text {
position: absolute;
display:none;
z-index:999;
top: 300px;
width:100%;
height: auto;
}
</style>
<div id="text">
<iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/6iNFimn4wFA" frameborder="0" allowfullscreen></iframe>
<iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/jsd-mNTIukM" frameborder="0" allowfullscreen></iframe><br>
<iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/ylD-WFvRZkM" frameborder="0" allowfullscreen></iframe>
<iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/g2YzRTAstPo" frameborder="0" allowfullscreen></iframe><br>
<iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/98NqtVG-hFU" frameborder="0" allowfullscreen></iframe>
<iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/O4weBTRCFzU" frameborder="0" allowfullscreen></iframe><br>
<iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/UVzEOsHT7XA" frameborder="0" allowfullscreen></iframe>
</div>
<div id="fullpage">
<div class="section" id="section0"></div>
<div class="section" id="section1"></div>
<div class="section" id="section2"></div>
<div class="section" id="section3"></div>
<div class="section" id="section4"></div>
</div>
This code opens div as expected but scrolling to see last contents is not working. Instead of video if I enter text scroll works perfectly. As soon as I add video in div scroll stops working. I haven't set overflow property for #text. Please help me out.
I found this worked
function testing(){
//forcing fullPage.js to recalculate dimensions.
setTimeout(function(){
fullpage_api.reBuild();
}, 500);
};
for me this didn't work
$.fn.fullpage.reBuild();
First of all, you should be using scrollOverflow:true rather than normalScrollElements.
scrollOverflow:
(default false) defines whether or not to create a scroll for the section in case its content is bigger than the height of it. When set to true, your content will be wrapped by the plugin. Consider using delegation or load your other scripts in the afterRender callback. In case of setting it to true, it requires the vendor plugin jquery.slimscroll.min and it should be loaded before the fullPage.js plugin. For example:
Then, fullPage.js is calculatingn the height of your sections on page load.
If the videos are not displayed on page load, fullPage.js won't know the content is changing until you tell it so.
Try this:
function displayDetails(id){
$('#text').show();
//forcing fullPage.js to recalculate dimensions.
$.fn.fullpage.reBuild();
}
More about the reBuild method in the docs:
reBuild()
Updates the DOM structure to fit the new window size or its contents.
Ideal to use in combination with AJAX calls or external changes in the
DOM structure of the site.
See this example I made for you
For react users, this is the solution I found, that works best.
You need to save the fullpageApi from the render method, in state.
And then, take advantage of the useEffect to call the rebuild method.
I was using it inside the render(), but then I was getting a lot of weird behaviours, because the rebuild() was being called in every other page state update.
const [fullPageApi, setFullPageApi] = useState<fullpageApi>();
useEffect(() => {
if (fullPageApi){
setTimeout(function () {
fullPageApi.reBuild();
}, 1000);
}
}, [fullPageApi]);
// (...)
// Component example
<ReactFullpage
scrollOverflow
navigation
render={({ fullpageApi }) => {
if (!fullPageApi) setFullPageApi(fullpageApi);
return (
<ReactFullpage.Wrapper>
<YourComponent />
</ReactFullpage.Wrapper>
);
}
}
/>

Load iFrame using Script

I want a
<iframe width="640" height="360" src="//www.youtube.com/embed/-Uwjt32NvVA?rel=0&autoplay=1" frameborder="0" allowfullscreen style="float: right;"></iframe>
to load after a div is clicked on.
This is because i don't want it to load (since it is autoplay) before the user navigates to it. It is on autoplay because I can't click on the iFrame video in chrome due to chrome bug.
Something like onclick="loadvideo();" will do
Thanks
Use Jquery .load();
function loadVideo() {
$('#div').load('<iframe width="640" height="360" src="//www.youtube.com/embed/-Uwjt32NvVA?rel=0&autoplay=1" frameborder="0" allowfullscreen style="float: right;"></iframe>');
}
Append it to a div once the user clicks on the load button:
<div id='videoDiv'></div>
<a id='loadVideoButton'>LOAD</a>
<script>
var loadVideo = function() {
$('#videoDiv').append("<iframe width="640" height="360" src="//www.youtube.com/embed/-Uwjt32NvVA?rel=0&autoplay=1" frameborder="0" allowfullscreen style="float: right;"></iframe>");
};
$("#loadVideoButton").click(loadVideo());
</script>
This will do the trick
$('div').click(function(){
$(this).html("<iframe width=\"640\" height=\"360\" src=\"//www.youtube.com/embed/-Uwjt32NvVA?rel=0&autoplay=1\" frameborder=\"0\" allowfullscreen style=\"float: right;\"></iframe>"
});
See this js fiddle

Categories