How do I make iframe "clickable" anywhere on the page?

Asked

Viewed 288 times

0

Assuming I have a youtube video in an iframe on my website, how would it be possible to play the iframe by clicking anywhere in the body of the page without having the iframe take over the entire screen? For example by clicking anywhere on the page, or any other iframe, will this iframe be executed first? From now on, thank you! I’m setting up a puzzlee site and a certain page, as a consequence of the previous one, the user comes across a black screen and will have to interact by just clicking 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();
 }); 
});

But I cannot extend the function of playing video to any point on the screen.

javascript iframe video youtube embed

  • Put the code in the question by mounting a [mcve] and explain the purpose of doing this, please.

  • Edited, my friend.

2 answers

0

Unable to load the IFRAME before the page itself unless that page is dynamically generated by Javascript.

Under IFRAME, you can use video embedding so it appears that 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 can pause, change the video the size, run a playlist and to play.

Refer to 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 />

  • I understand, but what would be the solution for, in case, a click on the body of the page to reproduce the iframe? even if this is loaded after the page? In case you take the condition of only playing the iframe when clicking on it?

  • I edited the post, sorry, I thought the difficulty was with the call of PLAY and PAUSE, I misunderstood. See if it’s clear with the use of ONFOCUS and ONBLUR.

0


If I understand the question correctly, an option would be you can look at the onClick event on 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>

  • Perfect! Thank you!

  • If this is the answer you were looking for, please mark as the accepted answer, so other users who need to know what the solution is.

Browser other questions tagged javascript iframe video youtube embed

You are not signed in. Login or sign up in order to post.