Like this?
<script>
function init() {
const vidDefer = document.getElementsByTagName('iframe');
vidDefer.forEach(function(vid) {
if (vid.dataset("src")) {
vid.setAttribute("src", vid.dataset("src"));
}
});
}
window.onload = init;
</script>
That looks better.
It’s not working though:
video isn’t showing
<script>
function init() {
const vidDefer = document.getElementsByTagName('iframe');
vidDefer.forEach(function(vid) {
if (vid.dataset("src")) {
vid.setAttribute("src", vid.dataset("src"));
}
});
}
window.onload = init;
</script>
Working version:
<script>
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i = 0; i < vidDefer.length; i++) {
if (vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src', vidDefer[i].getAttribute('data-src'));
}
}
}
window.onload = init;
</script>
That’s because you now have a new issue. Solve these issues one at a time.
vidDefer is erroring because it doesn’t have a forEach method.
The reason for that is that getElementsByTagName gives an HTMLCollection, when you instead could do with a nodeList. querySelectorAll does that for you.
// const vidDefer = document.getElementsByTagName('iframe');
const vidDefer = document.querySelectorAll('iframe');
What’s next?
TypeError: vid.dataset is not a function
<script>
function init() {
const vidDefer = document.querySelectorAll('iframe');
vidDefer.forEach(function(vid) {
if (vid.dataset("src")) {
vid.setAttribute("src", vid.dataset("src"));
}
});
}
window.onload = init;
</script>
One problem at a time.
Use vid.dataset.src instead.
<script>
function init() {
const vidDefer = document.querySelectorAll('iframe');
vidDefer.forEach(function(vid) {
if (vid.dataset.src("src")) {
vid.setAttribute("src", vid.dataset("src"));
}
});
}
window.onload = init;
</script>
No, you’re doing it wrong.
Where you before had vid.dataset("src") you should instead have vid.dataset.src
if (vid.dataset.src)) {
<script>
function init() {
const vidDefer = document.querySelectorAll('iframe');
vidDefer.forEach(function(vid) {
if (vid.dataset.src)) {
vid.setAttribute("src", vid.dataset("src"));
}
});
}
window.onload = init;
</script>
You’ve missed a spot.
Like this?
<script>
function init() {
const vidDefer = document.querySelectorAll('iframe');
vidDefer.forEach(function(vid) {
if (vid.dataset.src) {
vid.setAttribute("src", vid.dataset.src);
}
});
}
window.onload = init;
</script>
Looks like it - it’s working now.
Hopefully you’ve learned a few things through this process too.
It seems like the code makes it load faster. Which is what it’s meant to do.
All that double click ad youtube stuff now doesn’t show up when it loads.
I suspect though that you’ll have no scripting control to play or stop the video content.
It’s only good for just the iframe player the way it is, nothing else added to it.
Is there a way to add more than 1 PlayVars to the code?
That’s what I’m up to with this.
Only 1 is good to adjust settings for 1 player.
If you want different settings on each player, you would need separate PlayerVars for each video.
Where is it used in that code?
Example:
What if I only want that on one video and not all of them?
playerVars: {
start: 30
end: 50
function addVideo(video) {
const videoId = video.getAttribute("data-id");
new YT.Player(video, {
width: 200,
height: 200,
videoId: videoId,
playerVars: {
start: 30
end: 50
},
events: {
"onReady": onPlayerReady
The playVars property is unique to the youtube player in the videoPlayer function.
Why are you wanting to add more than one of them to the code?
If I want to add a start and end time to a few of them.
or if I want to loop one of them.
playerVars: {
start: 30
end: 50