Copied to clipboard

Flag this post as spam?

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


  • Caglar 15 posts 86 karma points
    24 days ago
    Caglar
    0

    I created video slider but not working correctly

    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="[email protected]" 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','[email protected]')"></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>
    
  • Brendan Rice 384 posts 626 karma points
    23 days ago
    Brendan Rice
    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','[email protected]')"
    

    and you have an infinite loop.

    What happens when you comment out this?

    document.getElementById(element.id).src = youtubeLink;
    
  • Caglar 15 posts 86 karma points
    23 days ago
    Caglar
    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;
    
  • Søren Gregersen 359 posts 1474 karma points MVP 2x c-trib
    17 days ago
    Søren Gregersen
    0

    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="[email protected]" 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','[email protected]')"></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="[email protected]" 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&[email protected](slideCount==0?1:0)" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    
    
    
    
    
              </div>
            slideCount++;
       }
    }
    

    Then you could also remove the

  • Brendan Rice 384 posts 626 karma points
    23 days ago
    Brendan Rice
    0

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

Please Sign in or register to post replies

Write your reply to:

Draft