Getting access of iframe imbedded page elements in js, JavaScript

Getting access of iframe imbedded page elements in js, JavaScript - javascript

document.querySelector('#clickbtn').addEventListener('click', () => {
document.querySelector('.ytp-large-play-button ytp-button').click();
})
<button id="clickbtn">Click</button>
<iframe width="560" height="315" class="clickbtn" src="https://www.youtube.com/embed/cmA-IyD8_BA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-
picture" allowfullscreen>
</iframe>
I'm trying to start playing video from my own created button.
but not working. Have any solution?
console:
Uncaught TypeError: Cannot read properties of null (reading 'click') at HTMLButtonElement.

use the youtube frame api from here, run/stop the video by
function stop() {
player.stopVideo();
}
OR
function run() {
player.playVideo();
}

Related

youtube video not showing

After clicking the thumbnail, the youtube video is not opening. It leaves white blank, have to reload to see the main video
$(function () {
var videos=$(".video");
videos.on("click", function () {
var elm=$(this), conts=elm.contents(), le=conts.length, ifr=null;
for (var i=0;
i < le;
i++) {
if (conts[i].nodeType==8) ifr=conts[i].textContent;
}
elm.addClass("player").html(ifr);
elm.off("click");
}
);
}
)
<div class="video">
<img class="zoom-video" src="~/image/body/special-offer.png">
<iframe width="600" src="https://www.youtube.com/embed/Ze7xsy9tVVQ" frameborder="0" allowfullscreen></iframe>
</div>

Try to copy the provided iframe from the video. Go to the video, click share, then click embed.
Copy paste the code there and try to run the code again.
Here's an example:
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

How can I reveal the video that has been clicked using IDs in HTML and Javascript?

I've tried this but the 2 js functions don't work. I want it to show an iframe and hide the title when the button is press, just since there are more than one iframes to show, I need a scalable system using the unique IDs of each iframe. Thanks.
<!DOCTYPE html>
<html>
<div id="000">
<div id="video">
<iframe style="position:relative;top:0;width:100%" src="https://www.youtube.com/embed/KfDB9e_cO4k" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div id="title">
<h3>Video 1</h3>
</div>
<button id='000' onclick="getId(this.id);showVideo();">Show</button>
</div>
<div id="111">
<div id="video">
<iframe style="position:relative;top:0;width:100%" src="https://www.youtube.com/embed/6dGYVKt1zw4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div id="title">
<h3>Video 2</h3>
</div>
<button type="button" id='111' onclick="getId(this.id);showVideo();">Show</button>
</div>
</html>
<script>
function getId(clicked_id) {
return clicked_id;
}
function showVideo() {
for (clicked_id) {
document.getElementById('video').style.display = "block";
document.getElementById('title').style.display = "none";
}
}
</script>
<style>
#video {
display: none;
}
</style>

Refer to the code below.
const showVide = (id) => {
const yt_frame = document.getElementById("youtube_frame");
yt_frame.setAttribute("src", `https://www.youtube.com/embed/${id}`);
yt_frame.style.display = "unset";
}
<!DOCTYPE html>
<html>
<body>
<iframe id="youtube_frame" style="position:relative;top:0;width:100%;display:none" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h2>SOME TITLE</h2>
<button onclick="showVide('bSOqMqMzN4Q')">Show</button>
<h2>SOME TITLE</h2>
<button onclick="showVide('jYOfvbD8HQ0')">Show</button>
</body>
</html>
You can list videos dynamically with any backend, for eg: PHP.
If you are using PHP, then you can add following code instead of show button and title list.
<?php
$videolist = array(
array(
"title"=>"Vishnu Stuti",
"ytid"=>"bSOqMqMzN4Q"
),
array(
"title"=>"Visnu Stuti",
"ytid"=>"jYOfvbD8HQ0"
)
);
//ABOVE CODE WILL BE DYNAMIC, IF YOU USE ANY DATABASE, RIGHT NOW ITS JUST FOR EXAMPLE, SO IT IS HARDCODED.
foreach($videolist as $vid){
echo "
<h2>{$vid['title']}</h2>
<button onclick='showVide(`{$vid['ytid']}`)'>SHOW</button>
";
}
?>

Prevent iframe scroll capture on youtube iframe embed on chrome

I have a standard youtube embed iframe from a random video:
<iframe width="560" height="315"
src="https://www.youtube.com/embed/ixJ5NbvXg_A" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
I duplicated this a couple of times to get some scroll overflow.
<html>
<head></head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</body></html>
When I serve this using django server on localhost the iframes prevent the page scroll.
When you move your cursor over a video and then use the mousewheel to scroll, it does not work.
The really funny thing is that when I paste the same code and save it to a local file on desktop. Then open it with chrome, the scroll works over youtube videos.
I checked in developer tools, the file served has exactly the same HTML.
There is 100% no CSS or Javascript served, there are no templates, nothing.
There is only a simple html file in both cases.
Version 71.0.3578.98 (Official Build) (64-bit)

Try this one, the last reply - the https://github.com/alvarotrigo/fullPage.js/issues/2229

My particular issue was a bug in Chrome. It would get solved if I restart the browser.

You can try to change the css of body like
body{
overflow: auto;
}

Sounds to me like a bug in the browser; here is a simple script that will prevent it from happening. It adds a scroll event to the window which disables pointer events on the iframes whenever the page is scrolling, then re-enables them 100ms after scrolling stops. Since the event is added in capture mode, it fires before the event can be caught by the iframe.
<script>
(function() {
var iframes, locked = null;
window.addEventListener("scroll", scroll, true);
function scroll(e) {
if (!locked) {
iframes = document.querySelectorAll('iframe');
lock('none');
}
clearTimeout(locked);
locked = setTimeout(function() {
locked = null;
lock('auto');
}, 100);
}
function lock(value) {
for (var i = 0; i < iframes.length; i++) {
iframes[i].style.pointerEvents = value;
}
}
})();
</script>

This works just fine in my browsers:
<html>
<head></head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</body></html>
Can you post a snippet reproducing the issue ?

how to play the vimeo video on query automatically?

In the beginning,the video is show,but the it is stop.
I want to play the video when browser starts.
<html>
<head></head>
<body>
<!-- NOTE: ?api=1 and player_id at the end of the URL -->
<iframe id="player" width="" height="" src="http://player.vimeo.com/video/62207569?api=1&player_id=player" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<script>
var player = $f(document.getElementById('player'));
player.addEvent('ready', function() {
player.api('play');
});
</script>
</body>
</html>

The froogaloop2 js is not working now try to use player.vimeo.com/api/player.js.
Just try like this
<iframe id="player" width="" height="" src="http://player.vimeo.com/video/62207569?api=1&player_id=player" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
var frame = document.querySelector('iframe');
var jqueryPlayer = new Vimeo.Player(frame);
jqueryPlayer.play();
console.log('played the video!');
</script>
I have run this code, just check the out put
You can refer to this https://github.com/vimeo/player.js#create-a-player for more details.

How to mute all Youtube videos in a container

I have multiple youtube video embeds inside a container, autoplay is enable but my problem is how to mute all the videos using javascript or any
<div id="video-container">
<iframe width="300" height="200" src="https://www.youtube.com/embed/o_nfdzMhmrA?wmode=transparent&autohide=1&autoplay=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<br><br>
<iframe width="300" height="200" src="https://www.youtube.com/embed/aBqU0LDd3WY?wmode=transparent&autohide=1&autoplay=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<br><br>
<iframe width="300" height="200" src="https://www.youtube.com/embed/ihc964sRt8M?wmode=transparent&autohide=1&autoplay=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>
I made a FIDDLE as an example but I don't know how to do it

Assign ids to each of your iframes, instanciate a player for each of them and mute the video when the player is ready :
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 players = new Array();
var players_list = ["ytplayer0", "ytplayer1", "ytplayer2"];
function onYouTubeIframeAPIReady() {
for (item in players_list) {
players[players_list[item]] = new YT.Player(players_list[item], {
events: {
'onReady': onPlayerReady
}
});
players[players_list[item]].name = players_list[item];
}
}
function onPlayerReady(event) {
players[event.target.name].playVideo();
players[event.target.name].mute();
}
<div id="video-container">
<iframe id="ytplayer0" width="300" height="200" src="https://www.youtube.com/embed/o_nfdzMhmrA?wmode=transparent&autohide=1&autoplay=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<br>
<br>
<iframe id="ytplayer1" width="300" height="200" src="https://www.youtube.com/embed/aBqU0LDd3WY?wmode=transparent&autohide=1&autoplay=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<br>
<br>
<iframe id="ytplayer2" width="300" height="200" src="https://www.youtube.com/embed/ihc964sRt8M?wmode=transparent&autohide=1&autoplay=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>
Here is a working jsfiddle

HTML
<iframe id="ytplayer" type="text/html" src="https://www.youtube-nocookie.com/embed/zJ7hUvU-d2Q?rel=0&enablejsapi=1&autoplay=1&controls=0&showinfo=0&loop=1&iv_load_policy=3" frameborder="0" allowfullscreen></iframe>
JS
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('ytplayer', {
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
player.mute();
player.playVideo();
}

Develop Reference

JavaScript is the programming language of the Web.

Getting access of iframe imbedded page elements in js, JavaScript - javascript

use the youtube frame api from here, run/stop the video by function stop() { player.stopVideo(); } OR function run() { player.playVideo(); }

Related

youtube video not showing

How can I reveal the video that has been clicked using IDs in HTML and Javascript?

Prevent iframe scroll capture on youtube iframe embed on chrome

how to play the vimeo video on query automatically?

How to mute all Youtube videos in a container

Categories

Resources