ancre et iframe

Bonjour l'équipe j'ai un petit problème, sur une page j'ai utilisé une iframe pour affiché mes vidéos dans une fenêtre sur la même page a partir d'une liste de lien.
Le problème c'est que comme la liste est longue ça descend jusqu'au bas de la page alors j'aimerai bien une solution pour que quand je clic sur un lien fr ma liste video, la page remonte automatiquement jusqu'à la fenêtre de lecteur comme une ancre !!!

le code utilisé

Code:

---

1 2 3

<iframe height="400px" width="700px" src="http://localhost/mon site/wp-content/uploads/2018/10/paradis.jpg" name="iframe_a"></iframe>   <a href="lien de ma video" target="iframe_a">video 01</a>

---

merci pour vos repenses.

Code:

---

1 2 3

<iframe id="iframe_a" height="400px" width="700px" src="http://localhost/mon site/wp-content/uploads/2018/10/paradis.jpg" name="iframe_a"></iframe>   <a href="#iframe_a">video 01</a>

---

8-)

Bonjour,

1- Je ne comprends pas trop : dans l'iframe, tu affiches une image (paradis.jpg) !
Où s'affichent les vidéos ??

Citation:

---

Envoyé par kiyuubi

...j'ai utilisé une iframe pour affiché mes vidéos...

---

:koi: pas clair non plus...
Toutes les vidéos sont dans une page, affichée dans l'iframe, c'est ça ?

2- A supposer qu'on affiche une page dans l'iframe

Code:

---

<iframe .... src="http://localhost/mon site/........../la-page-avec-les-videos" name="iframe_a"></iframe>

---

Et que dans cette page, on a un id pour chaque vidéo : id="ma-video-1", id="ma-video-2",...

Alors :

Code:

---

1 2 3

<a href="http://localhost/mon site/........../la-page-avec-les-videos#ma-video-1" target="iframe_a">video 1</a> <a href="http://localhost/mon site/........../la-page-avec-les-videos#ma-video-2" target="iframe_a">video 2</a> ...

---

Citation:

---

Envoyé par psychadelic

Code:

---

1 2 3

<iframe id="iframe_a" height="400px" width="700px" src="http://localhost/mon site/wp-content/uploads/2018/10/paradis.jpg" name="iframe_a"></iframe>   <a href="#iframe_a">video 01</a>

---

8-)

---

malheureusement ca na pas marché.:(

Citation:

---

Envoyé par jreaux62

1- Je ne comprends pas trop : dans l'iframe, tu affiches une image (paradis.jpg) !
.......

---

je crois tu na pas vraiment compris ma question.
la photo c’est pour que la partie occupé par l'iframe ne soit pas vide.

Pièce jointe 418174
Pièce jointe 418178

j’espère avec les image vous allez comprendre.

Comment tu "charges" chaque vidéo ?
Montre des exemples de "vrais" liens (avec une URL vidéo qui fonctionne).

Citation:

---

Envoyé par jreaux62

Comment tu "charges" chaque vidéo ?

Montre des exemples de "vrais" liens (avec une URL vidéo qui fonctionne).

---

avec un lien embed par exemple

Code:

---

<a href="https://www.youtube.com/embed/cjNUE0LmdTE" target="iframe_a">ÉPISODE 02</a>

---

Code:

---

<iframe id="iframe_a" height="400px" width="700px" src="http://localhost/mon site/wp-content/uploads/2018/10/paradis.jpg" name="iframe_a"></iframe>

---

Code:

---

<a href="#" onclick="document.querySelector('#iframe_a').src='https://www.youtube.com/embed/cjNUE0LmdTE';document.querySelector('#iframe_a').scrollIntoView();return false;">ÉPISODE 02</a>

---

OU MIEUX : avec une fonction :

Code:

---

<a href="#" onclick="load_iframe_video('https://www.youtube.com/embed/cjNUE0LmdTE');">ÉPISODE 02</a>

---

Code:

---

1 2 3 4 5 6 7

function load_iframe_video( url ) { var iframe = document.querySelector('#iframe_a'); iframe.src = url; iframe.scrollIntoView(); return false; }

---

oui ça marche bien mais ça serai super génial si tu ajoute l’effet smooth stp :mrgreen:

:recherch: "JavaScript smooth scrolling"

ex. : http://jsfiddle.net/forestrf/tPQSv/2/

Code:

---

1 2 3 4 5 6 7 8

function load_iframe_video( url ) { var iframe = document.querySelector('#iframe_a'); iframe.src = url;   scrollTo(iframe, 2000); return false; }

---

@jreaux62, nikel merci énormément