Moving image header stopped working

General Web Dev
1

For some reason the header images on https://www.malenytropicalretreat.com have stopped working a week or three back. They should move like https://.www.willowbrook.net.nz - This site was designed on the same template. I have compared both lots of code, but can’t find the reason for it to simply stop working - just shows the blank black area where the header images should be.

Issue two I have on the same site is that the YouTube videos on the front page won’t work either.

Hopefully someone can help with my problem.

Cheers,

1 Like
2

I don’t know why it would suddenly stop working but the themepunch file is different in both versions.

If I copy the file from your working demo the slideshow starts working.

It seems to be this line that is causing the problem.

createElementNS("https://www.w3.org/2000/svg",t)

The above https version doesn’t work while the http version below does.

createElementNS("http://www.w3.org/2000/svg",t)

Hope that’s of some help :slight_smile:

1 Like
3

Thanks Paul, That was the answer. I have checked two other sites made with that same template and they were both just http as opposed to https. I can’t image when or why this happened, but there you go. It is all go now.

All I need sort out now is the two YouTube videos which have also stopped working.Does anybody have any ideas?

Cheers,

1 Like
4

I think you need to use the embed option from youtube.

e.g.

<iframe width="560" height="315" src="https://www.youtube.com/embed/JYbAE5Zuolo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

I also notice your closing section tag in in the wrong place and should be like this.

      <section class="testimonials mt10">
          <div class="col-md-6">
            <h2 class="lined-heading bounceInLeft appear" data-start="0"><span>Maleny Tropical Retreat 2015:</span></h2>
            <div class="item">
              <iframe width="450" src="https://youtube.com/embed/JYbAE5Zuolo" allowfullscreen class="img-responsive-left"></iframe>
            </div>
          </div>
        </section>
        <section class="about mt10">
          <div class="col-md-6">
            <h2 class="lined-heading bounceInRight appear" data-start="0"><span>Maleny Tropical Retreat 2018:</span></h2>
            <div class="item">
              <iframe width="450" src="https://youtube.com/embed/j7MqnvriDYc" allowfullscreen class="img-responsive-right"></iframe>
            </div>
          </div>
        </section

Note that those aren’t really sections anyway so the tag is superfluous.

I also adjusted the video url in that snippet and they seem to work locally now.

1 Like
5

Thanks again Paul. That worked perfectly. I did have the old one (2015) video working for a couple years, but when I added the 2018 one last week, it wouldn’t work. I tried the embed version, but for some reason it still wouldn’t work, then with playing around, I lost the original one. Anyway, all good as both now work.

I’m not sure if there is a way to widen the new one to match the old one, or whether that is a YouTube setting. By just adjusting the width in the code, it doesn’t seem to have any effect on it. Any suggestions on that front?

Cheers.

1 Like
6

You seem to have different values on your .img-responsive-right and .img-responsive-left. You can probably just set them both to max-width:100%. Unfortunately I’m not back until Wednesday so can’t check properly for you.

7

Hi Paul,

Thanks again. That was it. Both left & right were set differently. Now all good.

Cheers.

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.