Discussion :

[Livie]

Bonjour � tous,

Je rencontre un probl�me pour int�grer une vid�o YouTube sur mon site r�alis� avec Divi. En suivant un tutoriel (https://www.divi-community.fr/tutori...ube-dans-divi/), tout a bien fonctionn�, mais d�s que je r�duis un peu la taille de l'�cran, la vid�o dispara�t et je me retrouve uniquement avec l'image de fond que j'ai attribu�e � ma section.

J'ai essay� d'utiliser un peu de code g�n�r� par ChatGPT pour ajuster la vid�o, mais cela a empir� les choses, et j'ai fini par devoir tout reprendre.

Je ne peux pas vous donner le lien de mon site car je travaille actuellement en local, mais si besoin, je peux r�aliser une vid�o de mon probl�me. Les param�tres de mon site sont exactement les m�mes que ceux du tutoriel, donc je me demande si quelqu'un a une id�e de la raison pour laquelle la vid�o dispara�t d�s que la taille de l'�cran change un peu.

Merci d'avance pour vos retours et votre aide

[gabi7756]

Boujour,
Ca manque d'extrait de code ...

[Livie]

voici

Dans mon fonction.php

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
function addVidbacking() {
  if ( is_page( '11' )) {
      wp_enqueue_script( 'vidbacking-js', get_stylesheet_directory_uri() . '/js/jquery.vidbacking.min.js', array( 'jquery' ), null, false );
  }
}
add_action( 'wp_enqueue_scripts', 'addVidbacking' );

Dans la page ou je veux afficher la video

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
<script>
    jQuery(document).ready(function($) {
        $("#video-back").prepend('<iframe src="https://www.youtube.com/embed/oLbNS3mAIB0" width="560" height="315" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen  class="vidbacking"></iframe>');
    });
 
jQuery(function($) {
    $('#video-back').vidbacking({});
}); 
</script>

CSS

Code css :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
.vidbacking-active-body-back{
	position: fixed;
	z-index: -100;
	min-width: 100%;
	min-height: 100%;
	top: 50%;
	left: 50%;
	background-size: cover;
	overflow: hidden;
	opacity: 1;
	transition: 2s opacity;
	transform: translateX(-50%) translateY(-50%);
}
 
.vidbacking-active-body-back-youtube{
	position: fixed;
	z-index: -100;
	/*min-width: 100%;
	min-height: calc(100% * 1.77);*/
	top: 50%;
	left: 50%;
	overflow: hidden;
	opacity: 1;
	transition: 2s opacity;
	transform: translateX(-50%) translateY(-50%);
}
 
.vidbacking-active-block-back{
	position: absolute;
	min-width: 100%;
	min-height: 100%;
	height: auto;
	width: auto;
	z-index: -100;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}
 
.vidbacking-active-block-back-youtube{
	position: absolute;
	/*min-width: 100%;
	min-height: 100%;*/
	height: auto;
	width: auto;
	z-index: 0;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}
 
.vidbacking{
	display: none;
}
.vidmask-body-back{
	background: url(videooverlay1.png) repeat;
	opacity: 0.4;
	min-height: 100%;
	min-width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -50;
	display: block;
}
.vidmask-block-back{
	background: url(videooverlay1.png) repeat;
	opacity: 1;
	min-height: 100%;
	min-width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	height: auto;
	width: auto;
	z-index: -50;
	display: block;
}
 
.fluid-width-video-wrapper {
	position: absolute!important;
	padding-top: 0;
	top: 50%;
	left: 50%;
}

et bien s�re classe video back a la div ou je veux la video.

[gabi7756]

Bonjour,

taille de l'�cran

Taille de l'�cran ou la taille de la vid�o ?
Lorsque tu changes d'orientation ?
Cdt,