Youtube video on click not closing after I hit close button - javascript

I have a video that I want to show to users on the website, I created a button where they click and it shows a youtube video in popup, but when I close it, it still shows "Playing audio" in the tab and you can hear the video still. How can I achieve when they click X or anywhere else(they can closing it too by clicking anywhere) to actually stops the video and its audio.
$(document).ready(function() {
$('#headerVideoLink').magnificPopup({
type:'inline',
midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
});
});
#headerPopup{
width:75%;
margin:0 auto;
}
#headerPopup iframe{
width:100%;
margin:0 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet"/>
<span class="icon-play mr-2"></span>Watch Video</p>
<div id="headerPopup" class="mfp-hide embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" width="854" height="480" src="https://www.youtube.com/embed/qN3OueBm9F4?autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
Any help will mean a lot, thanks!

What if you use the iframe content type of the MagnificPopup plugin?
So it would look something like this:
$(document).ready(function () {
$('#headerVideoLink').magnificPopup({
type: 'iframe',
midClick: true,
items: {
// HTML markup of popup, `mfp-close` will be replaced by the close button
markup: '<div class="mfp-iframe-scaler">' +
'<div id="headerPopup" class="mfp-hide embed-responsive embed-responsive-21by9">' +
'<iframe class="embed-responsive-item" width="854" height="480" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>' +
'</div>',
patterns: {
youtube: {
// URL that will be set as a source for iframe.
src: 'https://www.youtube.com/embed/qN3OueBm9F4?autoplay=1'
}
},
// Templating object key. First part defines CSS selector, second attribute.
// "iframe_src" means: find "iframe" and set attribute "src".
srcAction: 'iframe_src',
}
});
});
https://dimsemenov.com/plugins/magnific-popup/documentation.html#iframe-type
Or try to clear the iframe source using your original Javascript:
$(document).ready(function () {
$('#headerVideoLink').magnificPopup({
type: 'inline',
midClick: true,
callbacks: {
open: function () {
// Will fire when this exact popup is opened
// this - is Magnific Popup object
},
close: function () {
// Will fire when popup is closed
$('#headerPopup > iframe').attr('src', '');
}
}
});
});

Related

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>
);
}
}
/>

remove autoplay from video on click javascript

I have used the following code to add autplay to iframe video onclick.
Html:
<span id="stoprotate"></span><iframe src="http://www.youtube.com/embed/TJ2X4dFhAC0?wmode=transparent" frameborder="0" class="slide" allowtransparency="true" id="video" wmode="opaque"></iframe>
script:
$(document).on('click','#video',function(e){
$(".roundabout-in-focus #video")[0].src += "&autoplay=1";
$(this).unbind("click");
})
Stop auto play
I need to remove autoplay on click the stopautoplay link. How to do that?
Change my answer:P Try to use a global variable to save the url and then reuse it when you click the
var gurl;
$(document).on('click','#video',function(e){
gurl = $(".roundabout-in-focus #video")[0].src;
$(".roundabout-in-focus #video")[0].src += "&autoplay=1";
$(this).unbind("click");
});
I wrote a sample:
http://ohcool.org/sof/13641740.html

Play embeded youtube video JS

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.

JQuery: Can I use a Dialog to open up an external web page?

Can I use a JQuery Dialog to open up an external web page, and if so - how?
Essentially, I want to replicate the abilities of LightWindow using JQuery (LightWindow is based on scriptalous).
www.stickmanlabs.com/lightwindow/index.html
Ideally, I want to use something that is apart of the JQuery core. If it need to be a JQuery plug-in, that's fine but I would really like to have it be apart of the core functionality of such features already exist.
In JQueryUI you are using a DIV as a Dialog.
$(function() {
$("#dialog").dialog();
});
So you can use an iframe inside DIV:
<div id="dialog" title="Google">
<IFRAME style="border: 0px;" SRC="http://www.google.com" width="100%" height = "100%" >
</div>
Edit:
If you want every LINK in your page to be displayed on JQueryUI Dialog here it is:
JavaScript:
$("a").click(function(event){
event.preventDefault();
$("#frame").attr("src", $(this).attr("href"));
$('#dialog').dialog('open');
});
HTML:
<div id="dialog" title="Dialog Title">
<IFRAME id="frame" style="border: 0px;" SRC="" width="100%" height = "100%" >
</div>
Just to expand on JCasso's great answer, you can handle this all in JavaScript:
$("a").click(function (event) {
event.preventDefault();
var page = $(this).attr("href");
var title = $(this).text();
$('<div></div>')
.html('<iframe style="border: 0px; " src="' + page +
'" width="100%" height="100%"></iframe>')
.dialog({
autoOpen: true,
modal: true,
height: 800,
width: 400,
title: title
});
});
Now any links on the page will be opened in inside of an iframe in a dialog box.
Working Demo in jsFiddle

Categories