Problème iframe

Question

Totone

11 May 2017 à 23:13

Bonsoir à tous,

Pour commencer, je ne suis pas un spécialiste en développement web Smiley lol

Voilà, j'incruste sur des pages d'accueil de site internet des vidéos avec présentateurs (filmés sur fond vert en studio). Lors de l'export je génère un fond transparent derrière le présentateur pour une parfaite incrustation de celui sur la page du site.

Cependant j'ai un petit soucis avec l'iframe. Quand la vidéo est terminée, l'iframe, le cadre de la vidéo, et le fond transparent restent actifs, et ensuite je ne peux pas cliquer sur les liens ou onglets qui se situent juste en dessous, ce qui est vraiment problématique.

Je vous mets ci-dessous le code en question.

Est-ce que quelqu'un aurait une idée pour me sortir de cette galère? Smiley lol

Merci par avance à vous tous! Bonne soirée!

<script language="Javascript">
if (screen.width < 750)
{
document.write ('<iframe id="test" scrolling="no" src="http://www.test.fr/videotest/videop.inc.php?width=250&height=240" width="250px" height="240px" style="border: none; z-index: 999999; position: fixed; left: 0px; bottom: 0px; right: 0px;"></iframe>');
}
else
{
document.write ('<iframe id="test" scrolling="no" src="http://www.test.fr/videotest/videog.inc.php?width=460&height=440" width="460px" height="440px" style="border: none; z-index: 999999; position: fixed; left: 0px; bottom: 0px; right: 0px;"></iframe>');
}
</script>

mathieu1004

12 May 2017 à 13:53

Salut,

je n'ai pas bien saisi le rapport entre ton petit bout de code et ton gros problème, mais pourquoi n'utilises tu pas la balise vidéo plutôt que des iframes ?

Idéalement il faudrait un peu plus de code et penses à utiliser les balises de mise en forme du code, c'est plus facile pour lire.
Modifié par mathieu1004 (12 May 2017 - 13:54)

Totone

13 May 2017 à 14:50

Salut Mathieu,

Merci pour ta réponse.
Pourquoi du iframe et pas une balise vidéo? Je n'en sais rien. Et je n'y connais pas grand chose.

Voici un exemple de vidéo. Une fois la vidéo terminée, le cadre de l'iframe reste actif et ce qui se trouve en-dessous n'est plus "cliquable".

https://www.myprivate.ch/index.php

Je te transmets le reste des codes dans un instant.

Merci à toi.
Modifié par Totone (16 May 2017 - 15:50)

Totone

13 May 2017 à 15:05

<?

if(isset($_GET['width'])) $width=$_GET['width'];
if(isset($_GET['height'])) $height=$_GET['height'];
?>

<html>
	<head>
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
		<script src="jquery-1.11.0.min.js"></script>
		<style>


		body {
			padding: 0;
			margin: 0;
			text-align:center;
		}
		
		.video {
			width:100% !important;
			position:absolute;
			height:98px;
			margin-left:0;
			bottom:0px;
		}
		/*.video .video-js{
			display:none !important;
		}*/
		
		
		/*.photoImage{ position:absolute; width:100%; text-align:center; top:25px;}
		.photoImageBeforePlay{}*/
		.photoImageBeforePlay{ position: relative;}
		.videoHolder{ position:relative;}
		
		.playnowbutton,.playnowbutton_main{
			position: absolute;
			/* width:155px;*/
			/*height:33px;*/
			left: 50%;
			top: 55%;
			-webkit-transform: translate(-50%, -50%);
			-moz-transform: translate(-50%, -50%);
			-o-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			cursor:pointer;
			z-index: 9999999;
		}
		
		.close{
			width:20px;
			height:20px;
			background-image:url(player/close-01.png);
			background-position:center;
			background-repeat:no-repeat;
			padding:0;
			margin:0;
			line-height:0;
			position: absolute;			
			right: 42%;
			top: 55%;
			-webkit-transform: translate(-50%, -50%);
			-moz-transform: translate(-50%, -50%);
			-o-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			cursor:pointer;
			z-index: 9999999;
		}
		
		.play{
			width:58px;
			height:32px;
			background-image:url(player/play-01.png);
			background-position:center;
			background-repeat:no-repeat;
			padding:0;
			margin:0;
			line-height:0;
			position: absolute;
			left: 47%;
			top: 75%;
			-webkit-transform: translate(-50%, -50%);
			-moz-transform: translate(-50%, -50%);
			-o-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			cursor:pointer;
			z-index: 9999999;
		}
		
		.pause{
			width:58px;
			height:32px;
			background-image:url(player/pause-01.png);
			background-position:center;
			background-repeat:no-repeat;
			padding:0;
			margin:0;
			line-height:0;
			position: absolute;
			left: 47%;
			top: 75%;
			-webkit-transform: translate(-50%, -50%);
			-moz-transform: translate(-50%, -50%);
			-o-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			cursor:pointer;
			z-index: 9999999;
		}
		
		
		#buffer{
			display: none;
		}
		.videoHolder:hover .player.opacitytrue{ opacity:1 !important;}
		
		/*@media only screen and (max-width:1024px){
			.videoHolder .player{ opacity:1 !important;}
		}*/
		#overflowCanvas{ overflow:hidden;}		
		</style>
	</head>


	
    <body>
		<div style="position:absolute; padding-top:0px; padding-left:0px;">
		    <div id="parentDiv" style="position: relative;">
				<div class="photoImageBeforePlay" id="Main_Div" style="height: <? echo $height ?>px; width: <? echo $width ?>px; position: absolute; left: 0px; top: 0px; display: none;">
					<img src="videos/lecteurg.png" class="imageThumb">
			   		<img src="player/button-cover-rouge.png" class="playnowbutton_main">
			    </div>
	
				<div class="videoHolder" style="height: <? echo $height ?>px; width: <? echo $width ?>px; display: none;">
				    
				    <div class="video" style="width: <? echo $width ?>px; display: none;">
				    	<video preload="auto" id="test_video" webkit-playsinline="true" playsinline="true" iphone-inline-video="" controls="" style="display: none;">

				
							<source src="videos/videog.webm" type="video/webm"; codecs=&quot;vorbis, vp8&quot;>
							<source src="videos/videog.m4v" type="video/mp4"; codecs=&quot;avc1.42E01E&quot;>
							<source src="videos/videog.ogv" type="video/ogg"; codecs=&quot;theora, vorbis&quot;>
                                                       

				    	</video>
						
						<!-- Video Controls -->
						<div id="player">
							<div id="play-pause" class="pause"></div>
							<div id="close" class="close"></div>
						</div>

					</div>		    
				    <div id="overflowCanvas" style="height: <? echo $height ?>px;">
						<canvas id="buffer" height="<? echo $height*2 ?>" width="<? echo $width ?>" style="display: none;"></canvas>
						<canvas id="output" height="<? echo $height ?>" width="<? echo $width ?>"></canvas>
				    </div>
				</div>
		    </div>
		</div>
		
		<script language="javascript" type="text/javascript">

		    $(document).ready(function() { 

				var video = document.getElementById("test_video");
				var c = document.getElementById("output");
				
				var ctx = c.getContext('2d');
				var i;
				bufferCanvas = document.getElementById('buffer');
				buffer = bufferCanvas.getContext('2d');

				video.addEventListener('play', function()
				{
				    width = <? echo $width ?>;
				    height = <? echo $height ?>;
				    i = window.setInterval(function()
				    {
					buffer.drawImage(video, 0, 0);
					var image = buffer.getImageData(0, 0, width, height),
						imageData = image.data,
						alphaData = buffer.getImageData(0, height, width, height).data;
					// image.crossOrigin = "Anonymous";
					for (var i = 3, len = imageData.length; i < len; i = i + 4) {
					    imageData[i] = alphaData[i - 1];
					}
					ctx.putImageData(image, 0, 0, 0, 0, width, height);
				    }, 20);
				}, false);
				video.addEventListener('pause', function() {
				    window.clearInterval(i);
				}, false);
				video.addEventListener('ended', function() {
				    clearInterval(i);
				    $('.video').hide();
					$('.videoHolder').hide();
				}, false);
		    });



			// Custom controls for the player
		    ///////////////////////////////////////////////////////////

		    var video = document.getElementById("test_video");
			// Buttons
			var playButton = document.getElementById("play-pause");
			var closeButton = document.getElementById("close");

			// Event listener for the play/pause button
			$("#play-pause").bind('click', function() {	
				if (video.paused == true) {
					// Play the video
					video.play();

					// Update the button image to 'Pause'
					$("#play-pause").addClass('pause').removeClass('play');
				} else {
					// Pause the video
					video.pause();

					// Update the button text to 'Play'
					$("#play-pause").addClass('play').removeClass('pause');
				}
		    });

			//Event listener for the close button
		    $("#close").bind('click', function() {	
		    	// Prevent the audio from playing after we have hidden the player
		    	$(".videoHolder").remove();

				// $('.video').hide();
				// $('.videoHolder').hide();
				// $('.photoImageBeforePlay').show();
		    });


		    // When 'playnowbutton_main' is clicked, launches the video
		    ///////////////////////////////////////////////////////////
		    $(".playnowbutton_main").bind('click', function() {	
				$('.photoImageBeforePlay').hide();
				// $("#play-pause").addClass('pause').removeClass('play');
				$('.videoHolder').show();
				$('.video').show();
				// $('.player').addClass('opacitytrue');

				video.play();
		    });


			// Wait 5 seconds, then click the 'playnowbutton_main' button to launch the video
		    /////////////////////////////////////////////////////////////////////////////////
			setTimeout(function() {
				if (!mobileAndTabletcheck()) {
					$(".playnowbutton_main").trigger("click");
			    }
				else
					{
					$('.photoImageBeforePlay').show();
					}
			}, 0);

		    function mobileAndTabletcheck() {
				var check = false;
				(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
				return check;
			};

		</script>
	</body>
</html>

Modifié par Totone (13 May 2017 - 15:06)

Totone

14 May 2017 à 15:40

Il faudrait que le cadre de l'iframe se ferme à la fin de la vidéo. Est-ce que quelqu'un a une idée? Smiley decu

Totone

15 May 2017 à 09:52

Presque 500 vues et pas une réponse? Smiley decu

mathieu1004

22 May 2017 à 15:10

Salut, désolé j'avais pas vu que tu avais répondu ^^.
Bon je reste sur l'idée qu'il doit être possible de faire plus simple sans utiliser d'iframe, mais bon a priori une solution quand même en ajoutant ce bout de code javascript :


//On récupère l'iframe, dans le contenu de l'iframe on récupère le document puis la balise vidéo puis on y ajoute un appel a la fonction FinVideo lorsque l'événement "ended" (fin de la video) aura lieu.
document.getElementById("videopresenters").contentWindow.document.getElementById("test_video").addEventListener('ended',FinVideo,false);

//On crée la fonction FinVideo qui sera appelé à la fin de la video
function FinVideo(e) {
//On récupère le parent de la balise iframe pour supprimer la balise iframe
document.getElementById("videopresenters").parentNode.removeChild(document.getElementById("videopresenters"))
 }

Modifié par mathieu1004 (22 May 2017 - 15:12)

Sujet clos

JavaScript, DOM et API Web HTML5

Problème iframe