I'm building a website which uses IFrames to play YouTube videos, instead of uploading the raw video as the host doesn't allow large file uploads and it seemed easier to use IFrames. However, how the website works is that when you press a button it opens a div over the top of the rest of the page, like a 'popup' I guess. So this requires that you can hide the IFrame when you close the div.
However, this doesn't work on mobile Chrome of Safari (for iOS10 latest versions). When I try to hide it, the rest of the div hides like normal but the video leaves an impression, as in you can't play it or click anything on the video but it prevents you clicking anything under the video also.
Has anyone encountered any issues like this? Can anyone suggest where my code is wrong?
The website is at http://citm.uk.tn/
Here's the code:
JavaScript:
function fillText(a){
$('#body').load('html/' + a + '.html');
b.style.height = '60vw';
b.style.visibility = 'visible';
ex.style.filter = 'blur(20px)';
ex.style.WebkitFilter = 'blur(20px)';
window.scrollTo(0,0);
}
function wipePop(){
b.style.height = '0';
b.style.visibility = 'hidden';
ex.style.filter = 'none';
ex.style.WebkitFilter = 'none';
frame.style.height = '0';
frame.style.opacity = '0';
}
HTML:
<a class='back' onclick='wipePop()'>Back To Home</a>
<iframe class='video' src="https://www.youtube.com/embed/YXwYJyrKK5A?wmode=opaque" frameborder="0" allowfullscreen id="frame">
</iframe>
More HTML:
<div class='ex' id='ex'>
<div class='banner'><img src='images/full.png' class='full' id='im'></div>
<div class='buttons'><button class='cir' id='1'><img class='buttonimg' src='images/1.png'></button><button class='cir' id='2'><img class='buttonimg' src='images/2.png'></button><button class='cir' id='3'><img class='buttonimg' src='images/3.png'></button><button class='cir' id='4'><img class='buttonimg' src='images/4.png'></button></div>
<div class='videobanner'><button class='vidbanner_l' onclick="fillText('video1')"><img src='images/video.png'></button><button class='vidbanner' onclick="fillText('video2')"><img src='images/video2.png'></button></div>
<br><br><br>
</div>
<div class='body' id='body'>
</div>
I am using jQuery but anything using pure javascript would be prefered. Thanks in advance.
Related
I've made a similar question in the past, but I decided to try again since I have gone in a different direction since then. (I was trying with YouTube API and wasn't getting anywhere with that)
I'm trying to build a website where different pages are shown by using a function that hides/shows different divs. One of those pages has a video from YouTube and I was trying to figure out a way to stop the video when the respective div is hidden. Right now, the video just keeps playing in the background (you can hear the sound), if you change to another page/div.
After some sleuthing on the internet (i.e. this website), I finally got a solution working which is as follows.
var stopButton = document.getElementById('fecharvideo');
stopButton.onclick = function() {
var myPlayer = document.getElementById("player");
myPlayer.setAttribute("src", " ");
};
Unfortunately, as you can probably guess. This means that after clicking on an element with the id=fecharvideo, the iframe simply disappears, meaning if you return to that div the video will no longer appear, which is not ideal.
Any similar solution to this problem that allows me to reset the video, instead of deleting it altogether?
Here's the fiddle (To test it out Open "Episódio 1", start video, Open "Episódios" through the hamburger menu, and then back to "Episódio 1"): https://jsfiddle.net/Santos1600/qu8ejwsm/20/
Solution:
html
<div id="ep1" class="ep1" style="display: none;">
<div class="video-background">
<div class="video-foreground">
<iframe id="player" src="https://www.youtube.com/embed/videoseries?list=**PLAYLISTID**&modestbranding=1&iv_load_policy=3&rel=0&showinfo=0&loop=1&autoplay=1&autohide=1&enablejsapi=1&playerapiid=ytplayer1" frameborder="0" allowfullscreen allowscriptaccess="always"></iframe>
</div>
</div>
<div class="container">
<!--Menu/Episódio 1-->
<div id="myNav2" class="overlayep">
<div class="overlay-content">
<ul>
<li>EPISÓDIOS</li>
<ul><li>POEMA MEDRICAS</li>
<li>O CÃO</li>
<li>TERAPIA À DISTÂNCIA</li>
<li>MANIA DA PERSEGUIÇÃO</li>
</ul>
<li>SOBRE</li></ul>
</div>
</div>
<div class="botaomenu" onclick="myFunction(this); toggleNav2();">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<img src="assets/logohorizontal.png" alt="logo" class="logosmall">
</div>
</div>
js
var video1 = document.getElementById('player')
function toggleVideo(a, state) {
var iframe = a.contentWindow;
iframe.postMessage('{"event":"command","func":"' + state + '","args":""}', '*');
}
The goal is to have just the div with id="yourdiv" instead of the whole page. It works in Windows OS with Chrome but it does not work in iPad with Chrome which is my end goal.
The Script
function printContent(el){
var restorepage = $('body').html();
var printcontent = $('#' + el).clone();
$('body').empty().html(printcontent);
window.print();
$('body').html(restorepage);
The Button after some basic page example html
<div>
<p>whatever don't print this</p>
</div>
<div id="yourdiv">
<p>print this only</p>
</div>
<button id="print" onclick="printContent('yourdiv');" >Print</button>
Found a solution with another post that works in iPad with Chrome browser.
Print <div id="printarea"></div> only?
The solution from Hardik Thaker is the one that works for this. Though if you dont know you'll have to look up how to add in css to have it pull page styling.
I have a YouTube video playing in the background AFTER the close button is clicked...Here's the jQuery I can't get to work:
$('#close1').on('click', function() {
// $('#video1').stopVideo();
$('#video1')[0]
.contentWindow
.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
});
Here's a the example: http://georgehowell.biz/unsw1/index.html
i found this interesting thread related this issue and it has many suggestions of solution, maybe any of them will work for you:
Stop embedded youtube iframe?
Without using YouTube's iframe_API; you can simply use:
iframe.contentWindow.postMessage(message, origin);
to send message to iframeWindow (from parentWindow). Those messages can include "playVideo", "pauseVideo", "stopVideo", "muteVideo" etc.. (whatever video service, in this case youtube, supports)
Check out the link below for the live demo:
https://codepen.io/mcakir/pen/JpQpwm
change 1 - the iframe src url should be blank here
<div id="openModal1" class="modalDialog">
<div>
X
<iframe width="600" height="338" src="" class="homeVideo" id="video1" allowfullscreen="true" allowscriptaccess="always"></iframe>
</div> <!----END modal-body ---->
</div> <!----END modal ---->
change 2: how to play the videos just set the src URL with autoplay=yup on the query string - we do not need to enable the JS api:
$('#thumb1').on('click', function(ev) {
$("iframe#video1")[0].src = "https://www.youtube.com/embed/Lop0VCYdpGQ?rel=0&wmode=transparent&autoplay=1";
});
change 3 - how to pause - just set the iframe src to an empty string:
$('#close1').click(function(){
$("iframe#video1")[0].src = "";
});
I've written some basic Javascript code to work with the videos on my website. Basically I have embedded video content, placed a transparent and clickable div over the video that when hovered over will play the video behind it, then pause when the mouse is moved away. It works flawlessly on Chrome and Safari (not tested IE, I work on a Mac) but not at all on Firefox, the videos do not play. I've searched here and other places for a reason why, but haven't been able to find anything. I've only started playing with Javascript the last couple of weeks so I wouldn't be surprised if I've missed something obvious!
<div class="sectionWrapper">
<a href="http://weathereddown.co.uk">
<div id="sales-section" class="video-block" onmouseover="playVideo1()" onmouseout="playVideo1()"></div>
</a>
<div class="videoWrapper">
<div id="wistia_92lscndvjx" class="wistia_embed" style="width:900px;height:506px;"> </div>
</div>
<script charset="ISO-8859-1" src="//fast.wistia.com/assets/external/E-v1.js"></script>
<script>
wistiaEmbed = Wistia.embed("92lscndvjx", {
videoFoam: true
});
</script>
<script type="text/javascript">
var open = false;
function playVideo1() {
open = !open
if (open == true) {
document.getElementById('wistia_8').play();
}
else {
document.getElementById('wistia_8').pause();
}
}
</script>
</div>
The Id references ('wistia_8') are correct, they refer to the code automatically generated on the page by the Wistia embed code.
Try using the same methods as the W3Schools site but instead of hooking up the buttons use your mouseover mouseout events instead!
Here
Hope this helps!
I've looked all over for an answer to this, and I can't find any similar problem anywhere.
I'm trying to set up a reveal where you click an image and a text box appears below it. The image has a rollover change, also. I've set it up as straight javascript, and as jquery, and both times it works on all browsers except firefox! I've tried pretty much everything I can think of, but the "toggle" command just isn't working.
The rollover change works fine in all browser, including firefox, so I don't think it's javascript in general. The script works perfectly in firefox outside of the facebook page.
Here's a link to my test (click on "shop satisfied" for reveal):
http://www.facebook.com/pages/ToyOtter/184864048266693?sk=app_192059734207312
This is the script I'm using:
function toggle5(showHideDiv, switchImgTag) {
var ele = document.getElementById(showHideDiv);
var imageEle = document.getElementById(switchImgTag);
if(ele.style.display == "block") {
ele.style.display = "none";
imageEle.innerHTML = '<img src="image2">';
}
else {
ele.style.display = "block";
imageEle.innerHTML = '<img src="image1">';
}
}
and this is the html:
<div id="headerDivImg"><a id="imageDivLink" href="javascript:toggle5('contentDivImg', 'imageDivLink');" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','http://www.toyotter.com/reveal/images/revealtest_03_ro.jpg',1)"><img src="http://www.toyotter.com/reveal/images/revealtest_03.jpg" name="Image5" width="501" height="28" border="0"></a></div> <div id="contentDivImg" style="display: none"><center><table width="350" border="0" align="center" cellpadding="10" cellspacing="2" bgcolor="#f1e3b8"><tr><td>Never go shopping for the holiday meal preparations on an empty stomach. It's too tempting! If you have a snack before picking up your groceries, you will be less impulsive and more likely to stay on a healthy track.</td></tr></table></center> </div>
Try changing href="javascript:toggle5('contentDivImg', 'imageDivLink');" to href="#" onclick="toggle5('contentDivImg', 'imageDivLink');".
Try changing the a href into an image with the following params.
<img id="imageDivLink" onClick="toggle5('contentDivImg', 'imageDivLink');" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','http://www.toyotter.com/reveal/images/revealtest_03_ro.jpg',1)">
You should look into css, hovers, for an alternative to onMouseOut and onMouseOver, it should look somethign like this.
#imageDivLink:hover{
background: url('location of the image');
}