Перейдите к iframe при использовании целевой ссылки - PullRequest
Новая
       11

Перейдите к iframe при использовании целевой ссылки

0 голосов
/ 06 декабря 2018

Мне нужно выяснить, как объединить целевую ссылку и фрейм.Я использую iframes для размещения видео и использую целевые ссылки для зрителей, чтобы изменить видео, воспроизводимое в iframe, иногда у нас возникает много разных вопросов, и страница может быть длинной, поэтому мне нужно выяснить, как перейти к iframe, когдассылка нажата.Я пытался объединить теги привязки, но я не могу понять это.Любая помощь приветствуется!

<div class="c-sponsored-landing__main-video">
    <div class="embed-responsive embed-responsive-16by9">
        <iframe name="video" src="https://player.vimeo.com/video/274107021?rel=0&amp;autoplay=1&amp;showinfo=0"
            webkitallowfullscreen mozallowfullscreen allowfullscreen class="embed-responsive-item"></iframe>
    </div>
</div>

<div class="c-sponsored-landing__thumbnails">
    <div class="row">
        <div class="col-sm-3">
            <a href="https://player.vimeo.com/video/274107021?rel=0&autoplay=1&showinfo=0" target="video"><img src="https://www.visioncareprofessional.com/digital/notalvision/1/seg1.png"
                    class="img-thumbnail img-responsive center-block"></a>
            <p><strong class="green">Q1:</strong> Why is monitoring intermediate AMD important?</p>
        </div>
        <div class="col-sm-3">
            <a href="https://player.vimeo.com/video/274107111?rel=0&autoplay=1&showinfo=0" target="video"><img src="https://www.visioncareprofessional.com/digital/notalvision/1/seg2.png"
                    class="img-thumbnail img-responsive center-block"></a>
            <p><strong class="green">Q2:</strong> What impact does early Wet AMD detection have on visual outcomes?</p>
        </div>
        <div class="col-sm-3">
            <a href="https://player.vimeo.com/video/274107379?rel=0&autoplay=1&showinfo=0" target="video"><img src="https://www.visioncareprofessional.com/digital/notalvision/1/seg3.png"
                    class="img-thumbnail img-responsive center-block"></a>
            <p><strong class="green">Q3:</strong> If the goal is early Wet AMD detection to help prevent vision loss,
                then how are we doing?</p>
        </div>
        <div class="col-sm-3">
            <a href="https://player.vimeo.com/video/274133949?rel=0&autoplay=1&showinfo=0" target="video"><img src="https://www.visioncareprofessional.com/digital/notalvision/1/seg4.png"
                    class="img-thumbnail img-responsive center-block"></a>
            <p><strong class="green">Q4:</strong> What impact does severe vision loss have on a patient's quality of
                life? </p>
        </div>
    </div>
</div>

Прямая ссылка: https://www.visioncareprofessional.com/digital/notalvision/1/index3.html

Ответы [ 2 ]

0 голосов
/ 06 декабря 2018

Прокрутка работает, но теперь iframe не обновляется с новым видео. 

    <div class="c-sponsored-landing__main-video" id="video">
        <div class="embed-responsive embed-responsive-16by9"><iframe allowfullscreen="" class="embed-responsive-item" mozallowfullscreen="" name="video" src="https://player.vimeo.com/video/303509941?rel=0&amp;autoplay=1&amp;showinfo=0" webkitallowfullscreen=""></iframe></div>
    </div>

    <div class="c-sponsored-landing__thumbnails">
        <div class="row">
            <div class="col-md-6">
                <div class="row grey-box1">
                    <div class="col-sm-6">
                        <a href="https://player.vimeo.com/video/303509941?rel=0&amp;autoplay=1&amp;showinfo=0" target="video"><img class="img-responsive center-block" src="https://www.visioncareprofessional.com/digital/aerie/1/1-simmons.png" /></a>
                        <p class="text-center small"><strong>Steve Simmons, MD</strong></p>
                    </div>

                    <div class="col-sm-6">
                        <a href="https://player.vimeo.com/video/303547792?rel=0&amp;autoplay=1&amp;showinfo=0" target="video"><img class="img-responsive center-block" src="https://www.visioncareprofessional.com/digital/aerie/1/1-singh.png" /></a>
                        <p class="text-center small"><strong>Inder Paul Singh, MD</strong></p>
                    </div>

                    <h4>How does Rhopressa<sup>&reg;</sup> address some of the key considerations in the medical management of glaucoma?</h4>
                </div>
            </div>

            <div class="col-md-6">
                <div class="row grey-box3">

                    <div class="col-sm-6">
                        <a href="https://player.vimeo.com/video/303547723?rel=0&amp;autoplay=1&amp;showinfo=0" target="video"><img class="img-responsive center-block" src="https://www.visioncareprofessional.com/digital/aerie/1/1-singh.png" /></a>
                        <p class="text-center small"><strong>Inder Paul Singh, MD</strong></p>
                    </div>

                    <div class="col-sm-6">
                        <a href="https://player.vimeo.com/video/303349557?rel=0&amp;autoplay=1&amp;showinfo=0" target="video"><img class="img-responsive center-block" src="https://www.visioncareprofessional.com/digital/aerie/1/1-radcliffe.png" /></a>
                        <p class="text-center small"><strong>Nathan Radcliffe, MD</strong></p>
                    </div>
                    <h4>Why does the mechanism of action of Rhopressa<sup>&reg;</sup> make it a significant addition to the therapeutic armamentarium for glaucoma?</h4>

                </div>
            </div>
        </div>
    </div>
<script type="text/javascript">
const video = document.getElementById("video")
const links = document.querySelectorAll("a")

links.forEach(link => {
    link.addEventListener("click", (e) => {
    e.preventDefault()
    // LOGIC TO CHANGE THE VIDEO
    video.scrollIntoView({block: 'nearest',  behavior: 'smooth' });
  })
})
</script>
0 голосов
/ 06 декабря 2018

Вы можете получить ссылку на видео и прослушать событие щелчка по ссылкам, после того, как событие щелчка инициировано, предотвратите нормальное поведение и используйте scrollIntoView , чтобы показать видео. 

const video = document.getElementById("video")
const links = document.querySelectorAll("a")

links.forEach(link => {
    link.addEventListener("click", (e) => {
    e.preventDefault()
    // LOGIC TO CHANGE THE VIDEO
    video.scrollIntoView({ block: 'end',  behavior: 'smooth' });
  })
})

https://jsfiddle.net/dupftwqa/1/

...