How to make iframe "clickable" anywhere on the page? [closed]

Navigation
0

Assuming I have a youtube video in an iframe on my site, how would I be able to reproduce the iframe by clicking anywhere in the body of the page without doing what the iframe takes over the entire screen? For example when clicking anywhere on the page, or in some other iframe, this iframe is executed first? Thank you very much in advance! I'm setting up a puzzlee site and a certain page, as a consequence of the previous one, the user is faced with a black screen and will have to interact with just a click and waiting, for the video to begin. I've tried to do something like this: 

<a id="play-video" href="#">Reproduzir video</a><br />
<iframe id="video" width="1280" height="720" 
src="//www.youtube.com/embed/xrel=0" frameborder="0" 
allowfullscreen></iframe>


$(document).ready(function() {
$('#play-video').on('click', function(ev) {
$("#video")[0].src += "&autoplay=1";
ev.preventDefault();
 }); 
});

However, I can not extend the video playback function to any point on the screen.

    
asked by anonymous 16.02.2018 / 21:26

2 answers

0

If I understood the question correctly, one option would be you can look at the onClick event in the body, for example: 

$(document).ready(function() {
		$('body').on('click', function(ev) {
			$("#video")[0].src += "&autoplay=1";
			ev.preventDefault();
		});
	});
<html class="" lang="en"><head prefix="og: http://ogp.me/ns#">
	<meta charset="utf-8">
	<meta content="IE=edge" http-equiv="X-UA-Compatible">
	<title>iFrame click test</title>
  <head>
  
  </head>
	<body>
		<a id="play-video" href="#">Reproduzir video</a><br />
		<iframe 
			id="video" 
			width="1280" 
			height="720" 
			src="https://www.youtube.com/embed/SLdaFYLdsWE?rel=0&amp;showinfo=0"frameborder="0" 
			allow="autoplay; 
			encrypted-media" 
			allowfullscreen>
		</iframe>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	</body>
</html>
    
16.02.2018 / 22:03
0

Can not load IFRAME before the page itself unless this page is dynamically generated by Javascript .

About the IFRAME, you can use embedded video so it looks like the video is running directly from your site with this URL pattern: 

http://www.youtube.com/embed/VIDEO_ID

Example: 

<iframe id="ytplayer" type="text/html" width="640" height="360"
  src="http://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com"frameborder="0"/>

Now if you want to use a custom player you will have to use the Youtube API: Youtube Player API Reference

With it you can create buttons with JAVASCRIPT commands that control the incorporation of the player, allowing you to pause, change the video size, run a playlist and play.

Regarding play only when the page is focused, you can use onfocus to play and onblur to pause the video, using the youtube API. I made an example with HTML5 to understand the use of ONFOCUS in the body of the page: 

var vid;
function setVideo(){
	vid = document.getElementById("myVideo");
}
<body onload="setVideo()" onfocus="vid.play();" onblur="vid.pause();">

<video id="myVideo" width="320" height="176">
  <source src="https://www.w3schools.com/tags/mov_bbb.mp4"type="video/mp4">
</video> Clique por aqui<br />
Ou por aqui<br />Ou por aqui<br />Ou por aqui<br />Ou por aqui<br />
    
16.02.2018 / 21:48
How to set the TabItem Header in bold? Problems with data node.js (SQL Data)