Would this be something that is doable? @Paul_Wilkins
My Code:
How its done using their api script code.
Using only 1 player.
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
player.setVolume(50);
}
Yes it is. Instead of assigning to a player variable, as this line does:
player = new YT.Player('player', {
you can instead save it to an array, and control each player from there.
1 Like
Let’s do 1 good, then I should be able to do the rest.
Here:
What am I doing wrong here?
How do I fix it so that it starts after you click the image?
Right now the audio is playing before anything is clicked.
This is what I’ve been stuck on trying to figure out.
<div class="wrapg">
<div class="video" onclick="thevid=document.getElementById('thevideo');
thevid.style.display='block'; this.style.display='none';
document.getElementById('iframe').src =
document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');">
<svg class="play" width="600" height="338" viewbox="-3 -0.3 30 24.655">
<path fill="#FA33FC" d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path fill="#FA33FC" d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></svg>
<div class="lines"></div>
</div>
<div id="thevideo">
<div id="player" id="iframe" class="playing"></div>
<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);
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '375',
width: '606',
videoId: 'M7lc1UVf-VE',
playerVars: {
autoplay: 1,
},
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
player.setVolume(50);
}
</script>
</div>
</div>
The working autoplay code without the javascript looked like this:
<div class="wrapg">
<div class="video" onclick="thevid=document.getElementById('thevideo');
thevid.style.display='block'; this.style.display='none';
document.getElementById('iframe').src =
document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');">
<svg class="play" width="600" height="338" viewbox="-3 -0.3 30 24.655">
<path fill="#FA33FC" d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path fill="#FA33FC" d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path></svg>
<div class="lines"></div>
</div>
<div id="thevideo">
<iframe id="iframe" class="playing" src="https://www.youtube-nocookie.com/embed/M7lc1UVf-VE?rel=0&showinfo=0&autoplay=0&iv_load_policy=3&cc_load_policy=0&fs=0&disablekb=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
.wrapg {
position: relative;
width: 606px;
height: 344px;
margin-top: 8px;
cursor: pointer;
border: 3px solid #0059dd;
box-sizing: border-box;
background: url("https://i.imgur.com/AJDZEOX.jpg") no-repeat 0 0;
}
.wrapg .play {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
fill: #0059dd;
}
.wrapg .playing {
position: absolute;
top: -3px;
left: -3px;
width: 606px;
height: 344px;
border: 3px solid #FA33FC;
box-sizing: border-box;
}
.wrapg .lines::before,
.wrapg .lines::after {
content: "";
position: absolute;
top: 0;
left: 198px;
width: 3px;
height: 100%;
background: #0059dd;
}
.wrapg .lines::after {
left: 399px;
}
.wrapg .video {
width: 606px;
display: block;
}
.wrapg #thevideo {
display: none;
}
.wrapg #thevideo,
iframe {
width: 600px;
height: 338px;
}
You already have 1 good. It’s the second link in your OP.
I’m trying to fix the javascript version of the code, the code that’s not working as it should.
Why try and fix something that’s broken if you’ve got something that works already?
Look at the example on the API page you linked. Here’s your paradigm:
When the page loads:
Invoke the creation script X times, where X is the number of images. Instead of referencing ‘player’, instead reference the correct div for each image. Store the objects created by the new YTPlayer line in an array. All instances should invoke a onReady event, pointing at a single function.
When a player is Ready:
Set the instance’s volume to 50%. (Instead of player.setVolume(50) in this line, you can get by with declaring it in a generic function for each instance to call as event.target.setVolume(50))
When a person clicks on an image:
Hide all video divs.
Stop all playing instances by invoking .stopVideo() (as seen on the API page you linked)
Reveal the correct video div.
Play the correct instance by invoking .playVideo() (as also seen on the API page you linked)
I did this here:
},
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
event.target.setVolume(50);
event.target.playVideo();
}
I just thought of something I would like to implement. I need to make a new sprite image though, and adjust all the margins. I’ll let you know when I have it ready.
Update* This will have to wait til’ I get the javascript on the first code working.
Working version not using javascript.
I would need to convert it to javascript.
Click image to open video. Using javascript.
I should be using one of these:
Code I’m working on.
function onPlayerReady(event) {
$('img').click(function() {
ytPlayer.playVideo();
});
}
$('img').click(function(){
video = '<iframe src="'+ $(this).attr('data-video') +'"></iframe>';
$(this).replaceWith(video);
});
Is this right?
Both mean the same?
Short form:
function onPlayerReady(event) {
player.setVolume(50);
ytPlayer.playVideo();
Long form:
function onPlayerReady(event) {
event.target.setVolume(50);
event.target.playVideo();
I have an idea!
I want to open the youtube player to play using this method.
What codes out of the above one would I remove and place in here?
This is what I took out:
(function iife() {
"use strict";
function hideInitialOverlay(wrapper) {
wrapper.classList.remove("inactive");
wrapper.classList.add("active");
hide(wrapper.querySelector(".cover"));
}
function initialOverlayClickHandler() {
var wrapper = document.querySelector(".wrapg");
var button = wrapper.querySelector(".playButton");
hideInitialOverlay(wrapper);
showPlayButton(button);
wrapper.removeEventListener("click", initialOverlayClickHandler);
button.addEventListener("click", playButtonClickHandler);
}
function initButton(selector) {
var wrapper = document.querySelector(selector);
var button = wrapper.querySelector(".playButton");
wrapper.classList.add("inactive");
wrapper.addEventListener("click", initialOverlayClickHandler);
hideAllButtons(button);
}
initButton(".wrapg");
}());
.wrapg .cover {
width: 600px;
height: 338px;
cursor: pointer;
border: 3px solid #0059dd;
box-sizing: border-box;
}
.wrapg.active,
.wrapg .cover {
background: url("https://i.imgur.com/AJDZEOX.jpg") no-repeat 0 0;
}
.wrapg .cover {
display: none;
}
.wrapg.inactive .cover {
display: block;
}
I got up this far.
(function iife() {
"use strict";
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function hideInitialOverlay(wrapper) {
wrapper.classList.remove("inactive");
hide(wrapper.querySelector(".play"));
hide(wrapper.querySelector(".cover"));
}
function initialOverlayClickHandler() {
var wrapper = document.querySelector(".wrape");
hideInitialOverlay(wrapper);
wrapper.removeEventListener("click", initialOverlayClickHandler);
}
function initButton(selector) {
var wrapper = document.querySelector(selector);
wrapper.classList.add("inactive");
wrapper.addEventListener("click", initialOverlayClickHandler);
}
initButton(".wrape");
}());
.wrape {
position: relative;
width: 606px;
height: 344px;
margin-top: 8px;
border: 3px solid #0059dd;
box-sizing: border-box;
}
.wrape .blue {
fill: #0059dd;
}
.wrape .play {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
cursor: pointer;
}
.wrape .cover {
width: 600;
height: 338px;
cursor: pointer;
background: url("https://i.imgur.com/AJDZEOX.jpg") no-repeat 0 0;
}
.wrape .cover {
display: none;
}
.wrape.inactive .cover {
display: block;
}
.wrape .cover::before,
.wrape .cover::after {
content: "";
position: absolute;
top: 0;
left: 198px;
width: 3px;
height: 100%;
background: #0059dd;
}
.wrape .cover::after {
left: 399px;
}
.hide {
display: none;
}
How would I put the youtube javascript with the above code?
<div id="player"></div>
<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);
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '375',
width: '606',
videoId: 'M7lc1UVf-VE',
playerVars: {
autoplay: 1,
},
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
event.target.setVolume(0);
event.target.playVideo();
});
}
</script>
I changed this:
function initialOverlayClickHandler() {
var wrapper = document.querySelector(".wrape");
var button = wrapper.querySelector(".playButton");
hideInitialOverlay(wrapper);
showPlayButton(button);
wrapper.removeEventListener("click", initialOverlayClickHandler);
button.addEventListener("click", playButtonClickHandler);
}
function initButton(selector) {
var wrapper = document.querySelector(selector);
var button = wrapper.querySelector(".playButton");
wrapper.classList.add("inactive");
wrapper.addEventListener("click", initialOverlayClickHandler);
hideAllButtons(button);
}
initButton(".wrape");
}());
to this:
With the updated code. I took out the stuff I didn’t think I needed, and there might be more stuff, but not sure.
function initialOverlayClickHandler() {
var wrapper = document.querySelector(".wrape");
hideInitialOverlay(wrapper);
wrapper.removeEventListener("click", initialOverlayClickHandler);
}
function initButton(selector) {
var wrapper = document.querySelector(selector);
wrapper.classList.add("inactive");
wrapper.addEventListener("click", initialOverlayClickHandler);
}
initButton(".wrape");
}());
This is getting too complicated.
This is what I want to make, something like this.
This is my code, what I have set up.
How I want it to work is.
Right now there are no images behind the svg’s because I haven’t decided yet, what’s behind each one is a placeholder image for now.
An image sprite.
How I want it to work is, After you would click on a play svg, the svg would disappear and the video would start playing above.
Last updated:
Added in
<div class="playinga"></div>
through playingi but haven’t decided how I will utilize that, or use it at all.
I changed the background of each box to green.
I was thinking maybe it would look something like this, but not sure how it would work because I’m not using images.
or maybe I would attach them to the play a-i svg classnames instead.
<div class="video-player__thumbs">
<div data-video="92UXfEIc4lI" class="video-thumb active songa"></div>
<div data-video="uWzF6p3gmJM" class="video-thumb songb"></div>
<div data-video="nc1VCP2bUuo" class="video-thumb songc"></div>
<div data-video="5GP5tBMQyt4" class="video-thumb songd"></div>
<div data-video="92UXfEIc4lI" class="video-thumb songe"></div>
<div data-video="uWzF6p3gmJM" class="video-thumb songf"></div>
<div data-video="nc1VCP2bUuo" class="video-thumb songg"></div>
<div data-video="5GP5tBMQyt4" class="video-thumb songh"></div>
<div data-video="92UXfEIc4lI" class="video-thumb songi"></div>
</div>
Is this going to be difficult to do?
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.