i created video slider but not working correctly

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Caglar 23 posts 94 karma points

Mar 28, 2021 @ 19:30

Using Umbraco And Getting Started

Umbraco 8

I'm using umbraco v8.12.1 and I created a video slider but my page refresh without nonstop. My code like that.

if(carousel != null && carousel.Any()) 
{ 
<div class="carousel slide" data-ride="carousel" id="@carouselId"> 
<div class="carousel-inner" role="listbox">
@{
        int slideCount = 0;
        foreach (var item in carousel.Where(x => x.IsVisible()))
        {
             string youtubeUrl = item.Value<string>("youtubeVideoUrl");
             <div class="item @(slideCount == 0 ? "active" : "")">

                   <iframe id="video_@slideCount" class="embed-player slide-media" src="http://www.youtube.com/embed/##video##? api=1&byline=0&portrait=0&title=0&background=1&mute=1&loop=0&autoplay=1" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen onload="iframeDidLoad('@youtubeUrl','video_@slideCount')"></iframe>

              </div>
            slideCount++;
       }
  }
</div>
<div>
    <a class="left carousel-control" href="#@carouselId" role="button" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i><span class="sr-only">Previous</span></a>
    <a class="right carousel-control" href="#@carouselId" role="button" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i><span class="sr-only">Next</span></a>
</div>

    <ol class="carousel-indicators">
    @for (int i = 0; i < slideCount; i++)
    {
        <li data-target="#@carouselId" data-slide-to="@i" class="@(i == 0 ? "active" : null)"> 
        </li>
    }
    </ol>
</div>
 }

<script>
     function iframeDidLoad(videoUrl, id) {

     var youtubeLink = "http://www.youtube.com/embed/##videoId##api=1&byline=0&portrait=0&title=0&background=1&mute=1&loop=0&autoplay=1";
     var element = document.getElementById(id);

     var video_id = videoUrl.split('v=')[1];
     var ampersandPosition = video_id.indexOf('&');
     if (ampersandPosition != -1) {
         video_id = video_id.substring(0, ampersandPosition);
     }

    youtubeLink = youtubeLink.replace("##videoId##", video_id);

    document.getElementById(element.id).src = youtubeLink;
  }
</script>

Copy Link

Brendan Rice 538 posts 1099 karma points

Mar 29, 2021 @ 11:54
0
Not sure but it seems like this line:
```
document.getElementById(element.id).src = youtubeLink;
```
Is causing the iFrame to reload which triggers the reload:
```
onload="iframeDidLoad('@youtubeUrl','video_@slideCount')"
```
and you have an infinite loop.

What happens when you comment out this?
```
document.getElementById(element.id).src = youtubeLink;
```
Copy Link
Caglar 23 posts 94 karma points

Mar 29, 2021 @ 12:54
0
Hi Brendan,

I need to write this code because I'm updating the src with this code. Otherwise the video won't open at all. My iframe calls this src. Somehow I have to go in the script and update the src.
```
document.getElementById(element.id).src = youtubeLink;
```
Copy Link

Søren Gregersen 441 posts 1884 karma points MVP 2x c-trib

Apr 04, 2021 @ 21:17

would it not make more sense to remove "autoplay" from them all but the first, and write out the right url in the html?

@{
    int slideCount = 0;
    foreach (var item in carousel.Where(x => x.IsVisible()))
    {
         string youtubeUrl = item.Value<string>("youtubeVideoUrl");
         <div class="item @(slideCount == 0 ? "active" : "")">





<iframe id="video_@slideCount" class="embed-player slide-media" src="http://www.youtube.com/embed/##video##? api=1&byline=0&portrait=0&title=0&background=1&mute=1&loop=0&autoplay=1" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen onload="iframeDidLoad('@youtubeUrl','video_@slideCount')"></iframe>





          </div>
        slideCount++;
   }
 }

would then be

@{
    var slideCount = 0;
    foreach (var item in carousel.Where(x => x.IsVisible()))
    {
         var ytUrl = new Uri(item.Value<string>("youtubeVideoUrl"));
         var ytQueryString = HttpUtility.ParseQueryString(youtubeUrl.Query);
         var ytVideoId = ytQueryString.Get("v");

         <div class="item @(slideCount == 0 ? "active" : "")">





<iframe id="video_@slideCount" class="embed-player slide-media" src="http://www.youtube.com/embed/@(ytVideoId)?api=1&byline=0&portrait=0&title=0&background=1&mute=1&loop=0&autoplay=@(slideCount==0?1:0)" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>





          </div>
        slideCount++;
   }
}

Then you could also remove the

Copy Link

Brendan Rice 538 posts 1099 karma points

Mar 29, 2021 @ 14:00

0

Can you not handle the code in C# inside the for each and remove the JavaScript?

Copy Link
is working on a reply...

Please Sign in or register to post replies