We Keep Coding

Add video to page on Button click

I am a beginner JS user, and I am trying to get a video to play on fullscreen and replace an invisible div further down on the page. I started with a guide from Chris Ferdinandi.
In his guide, the video replaces the image that is clicked. I would like to have the div later down on the page to be replaced on the click.
Any guidance would be great!
HTML
<a data-video="480459339" class="stylsheetref" href="#" target="">Watch the Tour</a>
<div id="video-replace"></div>
Javascript (modified from this guide)
<script>
if (!Element.prototype.requestFullscreen) {
Element.prototype.requestFullscreen = Element.prototype.mozRequestFullscreen || Element.prototype.webkitRequestFullscreen || Element.prototype.msRequestFullscreen;
}
// Listen for clicks
document.addEventListener('click', function (event) {
//Set invisible Div (new code added by me)
var videonew = '#video-replace');
// Check if clicked element is a video link
var videoId = event.target.getAttribute('data-video');
if (!videoId) return;
// Create iframe
var iframe = document.createElement('div');
iframe.innerHTML = '<p>x</p><iframe width="560" height="960" src="https://player.vimeo.com/video/' + videoId + '?rel=0&autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
var video = iframe.childNodes[1];
// Replace the image with the video
event.target.parentNode.replaceChild(video, videonew);
// Enter fullscreen mode
video.requestFullscreen();
}, false);
</script>

There are problems in your code.
var videonew = '#video-replace'); there's an orphan ), since you are using this in the `replaceChild``method I assume you want the variable to reference to an element.
So change it to
var videonew = document.querySelector('#video-replace');
Pro tip: Using the Developer console during development can help you figure out such errors in your code.

Adding a close function that doesn't reposition page

I added the ability to display a youtube video within a Lightbox on my website. However, the code I found to help with this doesn't have a close (X) on the Lightbox. Whilst it does close by just clicking anywhere on the mask, I think not all web users are going to realise this, so I added a simple
x
onto the Lightbox div. Whilst this does actually give a functional closing (X) on the lightbox, it has the undesirable effect of the page being back at the top when the Lightbox has closed.
What I ideally want is for the Lightbox to simply close, and the page remains in the same place as it was when it opens, which is what happens if I just click on the mask.
I can see there is a section commented '// Hide lightbox when clicked on', but I have no clue how I can make an (X) also trigger this same action.
Here is the complete script used.
<div id="youtubelightbox" class="parent">x
<div class="centeredchild">
<div class="videowrapper">
<div id="playerdiv"></div>
</div>
</div>
</div>
<script>
// load Youtube API code asynchronously
var tag = document.createElement('script')
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0]
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag)
var isiOS = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)/i) != null //boolean check for iOS devices
var youtubelightbox = document.getElementById('youtubelightbox')
var player // variable to hold new YT.Player() instance
// Hide lightbox when clicked on
youtubelightbox.addEventListener('click', function(){
this.style.display = 'none'
player.stopVideo()
}, false)
// Exclude youtube iframe from above action
youtubelightbox.querySelector('.centeredchild').addEventListener('click', function(e){
e.stopPropagation()
}, false)
// define onYouTubeIframeAPIReady() function and initialize lightbox when API is ready
function onYouTubeIframeAPIReady() {
createlightbox()
}
// Extracts the Youtube video ID from a well formed Youtube URL
function getyoutubeid(link){
// Assumed Youtube URL formats
// https://www.youtube.com/watch?v=Pe0jFDPHkzo
// https://youtu.be/Pe0jFDPHkzo
// https://www.youtube.com/v/Pe0jFDPHkzo
// and more
//See http://stackoverflow.com/a/6904504/4360074
var youtubeidreg = /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/ ]{11})/i;
return youtubeidreg.exec(link)[1] // return Youtube video ID portion of link
}
// Creates a new YT.Player() instance
function createyoutubeplayer(videourl){
player = new YT.Player('playerdiv', {
videoId: videourl,
playerVars: {autoplay:1,
rel:0,
showinfo:0,
fs:0
}
})
}
// Main Youtube lightbox function
function createlightbox(){
var targetlinks = document.querySelectorAll('.lightbox')
for (var i=0; i<targetlinks.length; i++){
var link = targetlinks[i]
link._videoid = getyoutubeid(link) // store youtube video ID portion of link inside _videoid property
targetlinks[i].addEventListener('click', function(e){
youtubelightbox.style.display = 'block'
if (typeof player == 'undefined'){ // if video player hasn't been created yet
createyoutubeplayer(this._videoid)
}
else{
if (isiOS){ // iOS devices can only use the "cue" related methods
player.cueVideoById(this._videoid)
}
else{
player.loadVideoById(this._videoid)
}
}
e.preventDefault()
}, false)
}
}
if (isiOS){ // iOS devices can only use the "cue" related methods
player.cueVideoById(this._videoid)
}
else{
player.loadVideoById(this._videoid)
}

After some trial and error I figured this out.
I changed the html to
<div id="youtubelightbox" class="parent">
<div class="centeredchild"><div id="x">x</div>
<div class="videowrapper">
<div id="playerdiv"></div>
</div>
</div>
</div>
And added the following to the script
x.addEventListener('click', function(){
youtubelightbox.style.display = 'none'
player.stopVideo()
}, false)

Button to mute/unmute video bg on divi theme

I'm making a website for a client using the divi theme. The site has a background video with sound. The customer wants in the video a button to turn the sound on and off.
With the following code I was able to mute but I can not make a button to turn on and off.
Can someone help me?
jQuery (document) .ready (function () {
jQuery (". et_pb_section_video_bg video"). prop ('muted', true);
});

Try with volume level!
Edit
And here are the functions for some volume down/up buttons.
$(document).ready(function(){
// Video element
var myVideo = $(".et_pb_section_video_bg video")[0];
// On load state (muted)
myVideo.volume = 0;
$("#sound_up").on("click",function(){
var actual_volume = myVideo.volume;
if(actual_volume<1){
myVideo.volume += 0.2;
}
});
$("#sound_down").on("click",function(){
var actual_volume = myVideo.volume;
if(actual_volume>0){
myVideo.volume -= 0.2;
}
});
});
Assuming the et_pb_section_video_bg video class is on the video element...

Javascript-generated embedded Vimeo players fail after a while

We have a website that loops through a playlist of Vimeo IDs, embedding an iFrame player until the video is done playing, destroying said I frame and starting over with the next video id. This seemingly works fine but stops working after an arbitrary number of idle hours. Our tests have been made in Chrome 59 on OSX. Here is a screenshot of the kind of errors that end up in our console.
As this is my first post, here's the link to the screenshot
We're not sure what could be causing this. Any help will be greatly appreciated!
EDIT: Here's the Javascript responsible for creating/destroying iframes. Also, the project is using AngularJS but I don't think it's relevant. :
var iframe_wrap = document.getElementById('player-wrap');
var iframe = document.getElementById('player');
var player = $f(iframe);
player.addEvent('ready', function() {
player.addEvent('finish', onFinish);
});
function onFinish() {
// Remove current iframe
iframe.parentNode.removeChild(iframe);
iframe = null;
player = null;
// Video increment
if((ctrl.currentVideo + 1) < ctrl.currentPlaylist.length) {
ctrl.currentVideo += 1;
}
else {
ctrl.currentVideo = 0;
}
// Create new iframe
var newPlayer = '<iframe id="player"
src="'+ctrl.currentPlaylist[ctrl.currentVideo].urlVimeo+'"
frameborder="0" webkitallowfullscreen mozallowfullscreen
allowfullscreen></iframe>';
if(ctrl.currentPlaylist[ctrl.currentVideo].contentType =='scenario'){
iframe_wrap.innerHTML = newPlayer;
}
iframe = document.getElementById('player');
player = $f(iframe);
player.addEvent('ready', function() {
player.addEvent('finish', onFinish);
});
$scope.$apply();
}

display:none not working on iPhone simulator

I am currently working on embedding a youtube video into a website.
I have created my own custom play and pause buttons, of which one is shown at a given time. If video is playing the pause button is shown, and if the video is paused the play button is shown.
It is working as it should for desktop, however, when testing on the iOS simulator both buttons are showing and display:none does not appear to work.
Has anyone seen this before? What is the solution? It seems like very strange behavior. Also, when I test in chrome and check what it looks like on the iPhone it works as expected, however the simulator shows different behaviour.
Please see my code below. Oddly enough, the same error is shown in the code below, when you run the code snippet, however, as mentioned earlier when I test on chrome it works perfectly.
<style>
#pause-button {
display: none;
}
</style>
<script type="text/javascript">
// global variable for the player
var player;
// this function gets called when API is ready to use
function onYouTubePlayerAPIReady() {
// create the global player from the video iframe
player = new YT.Player('video', {
events: {
// call this function when player is ready to use
'onReady': onPlayerReady,
// call this function when player changes state i.e. when video ends
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
var playButton = document.getElementById("play-button");
playButton.addEventListener("click", function() {
player.playVideo();
playButton.style.display = "none";
pauseButton.style.display = "block";
});
var pauseButton = document.getElementById("pause-button");
pauseButton.addEventListener("click", function() {
player.pauseVideo();
playButton.style.display = "block";
pauseButton.style.display = "none";
});
}
function onPlayerStateChange(event) {
//replay when video ends
if (event.data === 0) {
player.playVideo();
}
}
// Inject YouTube API script
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>
<!-- Make sure ?enablejsapi=1 is on URL -->
<!-- &controls=0 hides controls -->
<!-- &showinfo=0 hides information -->
<!-- &rel=0 prevents related video been shown at the end -->
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/YXsGr21GD0M?enablejsapi=1&html5=1&controls=0&showinfo=0&rel=0" frameborder="0" allowfullscreen></iframe>
<div class="buttons">
<!-- if we needed to change height/width we could use viewBox here -->
<svg class="button" id="play-button">
<use xlink:href="#play-icon">
<path id="pause-icon" data-state="playing" d="M11,10 L17,10 17,26 11,26 M20,10 L26,10 26,26 20,26" />
</use>
</svg>
<svg class="button" id="pause-button">
<use xlink:href="#pause-icon">
<path id="play-icon" data-state="paused" d="M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28" />
</use>
</svg>
</div>

<use> tags render what they point to, they aren't supposed to render their children.
The href (SVG2) or (xlink:href (SVG 1.1) attribute of a <use> tag should point to your paths via the id of the path.
In your case you could probably remove the tags altogether and just have paths which you could show or hide.