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>
Related
I want youtube video embeded in multiple iframes on pageload to be played when my mouse hover over it and pause when hover out. My below code works, but on pageload i have to click somewhere on the page. What I want is, without click, the page should respond to my mouseover and mouseout event. Can any one help me to do this.
<html>
<script src="https://www.youtube.com/player_api"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<!-- Jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Youtube player API -->
<script src="//www.youtube.com/player_api"></script>
<body>
<!-- embeded player1 -->
<div id="player0" name="vp" onmouseover="Mouseover(this)" onmouseout="Mouseout(this)" videoId="K-0Mp075kPQ">
<iframe title="YouTube video player" scrolling="no" frameborder="0" onload="iFrameResize()" allowfullscreen></iframe>
</div>
<p></p>
<!-- embeded player2 -->
<div id="player1" name="vp" onmouseover="Mouseover(this)" onmouseout="Mouseout(this)" videoId="fg4CehuZORA">
<iframe title="YouTube video player" scrolling="no" frameborder="0" onload="iFrameResize()" allowfullscreen></iframe>
</div>
<script>
jQuery(document).ready(initYoutubePlayer);
function initYoutubePlayer() {
jQuery('div[name="vp"]').each(function(){
let vid =jQuery(this).attr('videoId');
let player = new YT.Player(this, {
height: '250',
width: '640',
enablejsapi: 1,
videoId: vid,
playerVars: {
'controls': 0,
'rel': 0,
'playlist': vid,
'loop': 1,
'modestbranding': 1,
'play':1
},
});
})
}
Mouseover = (el) => {
let yt_object = YT.get(el.id)
yt_object.playVideo();
}
Mouseout = (el) => {
let yt_object = YT.get(el.id)
yt_object.pauseVideo();
}
jQuery(document).ready(initYoutubePlayer);
</script>
</body>
</html>
To play video with a mouseover without any click you should first remove the onload function and call the initYoutubePlayer() function as the document gets ready. Also remove the play:1 parameter from the playerVars object because it will play video automatically as the page load.
Check this one:
<html>
<script src="https://www.youtube.com/player_api"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<!-- Jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Youtube player API -->
<script src="//www.youtube.com/player_api"></script>
<body>
<!-- embeded player1 -->
<div id="player0" name="vp" onmouseover="Mouseover(this)" onmouseout="Mouseout(this)" videoId="K-0Mp075kPQ">
<iframe title="YouTube video player" scrolling="no" frameborder="0" allowfullscreen></iframe>
</div>
<p></p>
<!-- embeded player2 -->
<div id="player1" name="vp" onmouseover="Mouseover(this)" onmouseout="Mouseout(this)" videoId="fg4CehuZORA">
<iframe title="YouTube video player" scrolling="no" frameborder="0" allowfullscreen></iframe>
</div>
<script>
jQuery(document).ready(function(){
initYoutubePlayer();
});
function initYoutubePlayer() {
jQuery('div[name="vp"]').each(function(){
let vid =jQuery(this).attr('videoId');
let player = new YT.Player(this, {
height: '250',
width: '640',
enablejsapi: 1,
videoId: vid,
playerVars: {
'controls': 0,
'rel': 0,
'playlist': vid,
'loop': 1,
'modestbranding': 1
},
});
});
}
Mouseover = (el) => {
let yt_object = YT.get(el.id)
yt_object.playVideo();
}
Mouseout = (el) => {
let yt_object = YT.get(el.id)
yt_object.pauseVideo();
}
</script>
</body>
</html>
I hope this resolve your issue 😄
In Firefox my terminal says
Autoplay is only allowed when approved by the user, the site is activated by the user, or media is muted.
This is an intentional feature of the browser to prevent malicious or poorly made websites from playing media when the user doesn't want it to.
If this project is only for personal use you can disable this policy, but if this is intended for random users it seems impossible.
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
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>
);
}
}
/>
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
I am embedding a youtube video using the iframe tag, but am unsuccessful at accessing the object's play functionality. Here is how I am loading the object:
<iframe id="player" type="text/html" width="640" height="390"
src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1&origin=http://example.com"
frameborder="0">
I've referenced the APIs, but I don't really understand how to access the play/pause functionality. I have tried using jquery as follows, but the captured object doesn't have the desired attributes:
vid = $('#player')
vid.playVideo() // doesn't work
I have also tried using the swfsobject as follows:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/embed/ngf03kCRw3s",
"ytapiplayer", "425", "356", "8", null, null, params, atts);
</script>
However, nothing appears on the page (and there are no errors in the console). Help is appreciated, Thanks,
A simple way to play an embedded YouTube video with jQuery (and JS) is by appending the parameter "autoplay=1" to the src attribute of the iframe.
In your case, the code would be something like this:
$("#player")[0].src += "&autoplay=1";
Another example by Martin Wolf:
$(document).ready(function() {
$('#play-video').on('click', function(ev) {
$("#video")[0].src += "&autoplay=1";
ev.preventDefault();
});
});
body {
padding: 30px;
}
a {
display: inline-block;
margin-bottom: 20px;
color: #000;
font-family: Arial, sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="play-video" href="#">Play Video</a><br />
<iframe id="video" width="420" height="315" src="//www.youtube.com/embed/9B7te184ZpQ?rel=0" frameborder="0" allowfullscreen></iframe>
And that's it. The video will start to play.
If someone needs the solution in Vanilla JS please leave a comment and I'll come back to update the answer when I have some extra time.