Prevent iframe scroll capture on youtube iframe embed on chrome - javascript

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 ?

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>

Getting access of iframe imbedded page elements in js, 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();
}

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>
";
}
?>

Multiple iFrames Next To One Another

Hey guys is it possible to have 3 iframes next to one another side by side instead of it going down the page vertically? Here is the iframe code i need put next to one another.
echo("<br /><iframe src='//player.vimeo.com/video/99496559' width='250' height='150' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href='http://vimeo.com/99496559'><b>Daniel talks about the Austplan model</b></a>.</p>");
echo("<iframe src='//player.vimeo.com/video/99582077' width='250' height='150' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href='http://vimeo.com/99582077'>Peace of mind</a>.</p>");
echo("<iframe src='//player.vimeo.com/video/99579066' width='250' height='150' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href='http://vimeo.com/99579066'>WHO IS DANIEL RENNEBERG?</a>.</p>");
Any help would be much appreciated. Thankyou.
I have a couple of recommendations before getting to the answer.
First, have a look at this Code Guide. It will allow you to write cleaner code.
Second, you don't need to use echo. You can but it will be cleaner without it.
Now for the solution. One way to do it with Use CSS. This is simple example but if you have lots of formatting to do you might want to look at a CSS framework. Something like bootstrap.
The CSS:
.row {
clear: both;
}
.column-3 {
float: left;
width: 30%;
}
The HTML:
<div class="row">
<div class="column-3">
<iframe src="//player.vimeo.com/video/99496559" width="250" height="150" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p><b>Daniel talks about the Austplan model</b>.</p>
</div>
<div class="column-3">
<iframe src="//player.vimeo.com/video/99582077" width="250" height="150" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p>Peace of mind.</p>
</div>
<div class="column-3">
<iframe src="//player.vimeo.com/video/99579066" width="250" height="150" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p>WHO IS DANIEL RENNEBERG?.</p>
</div>
</div>
just use css and code the iframes inline-block
iframe{
display:inline-block;
/* other designs you want*/
}
just put iframes in divs and do like that.
<style>
.frame{
float:left;
margin:20px;
}
</style>
<div class="frame">
<iframe src='a.html' width='250' height='150' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href='http://vimeo.com/99496559'><b>Daniel talks about the Austplan model</b></a>.</p>
</div>
<div class="frame">
<iframe src='a.html' width='250' height='150' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href='http://vimeo.com/99582077'>Peace of mind</a>.</p>
</div>
<div class="frame">
<iframe src='a.html' width='250' height='150' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href='http://vimeo.com/99579066'>WHO IS DANIEL RENNEBERG?</a>.</p>
</div>
Put the 3 iframes into a table:
<table>
<tr>
<td>iframe1</td><td>iframe2</td><td>iframe3</td>
</tr>
</table>
try using :
style="display:inline"
it should work.

How can I replace youtube / vimeo url with embed code in javascript code?

I've tried replace youtube and vimeo url with embed code in javascript code.
I've used this code:
EXAMPLE 1:
HTML:
<div id="divContent"></div>
JAVASCRIPT:
$("#divContent").html('http://www.youtube.com/watch?v=t-ZRX8984sc <br /> http://vimeo.com/82495711 <br /> http://youtu.be/t-ZRX8984sc');
$('#divContent').html(function(i, html) {
return html.replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, '<iframe width="200" height="100" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>').replace(/(?:http:\/\/)?(?:www\.)?(?:vimeo\.com)\/(.+)/g, '<iframe src="//player.vimeo.com/video/$1" width="200" height="100" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');
});
DEMO EXAMPLE 1: http://jsfiddle.net/88Ms2/301/ - It's not working.
EXAMPLE 2
HTML:
<div id="divContent">
http://www.youtube.com/watch?v=t-ZRX8984sc
<br />
http://vimeo.com/82495711
<br />
http://youtu.be/t-ZRX8984sc
</div>
JAVASCRIPT:
$('#divContent').html(function(i, html) {
return html.replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, '<iframe width="200" height="100" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>').replace(/(?:http:\/\/)?(?:www\.)?(?:vimeo\.com)\/(.+)/g, '<iframe src="//player.vimeo.com/video/$1" width="200" height="100" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');
});
DEMO EXAMPLE 2: http://jsfiddle.net/88Ms2/300/ - It's working
I've retrieved a data from database using ajax. I need the data with html code insert into div using javascript. How can I modify the example 1 to the correct code?
In example 1, change the javascript code to:
$('#divContent').contents()
.filter(function(){
return this.nodeType === 3;
})
.map(function(index, text){
$(text).replaceWith(
text.textContent.replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, '<iframe width="200" height="100" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>').replace(/(?:http:\/\/)?(?:www\.)?(?:vimeo\.com)\/(.+)/g, '<iframe src="//player.vimeo.com/video/$1" width="200" height="100" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>')
);
})
It should work now.

Categories

Resources