    
        
                <section class="emotion--container emotion--column-5 emotion--mode-fluid emotion--0"
                         data-emotion="true"
                         data-gridMode="fluid"
                         data-fullscreen="false"
                         data-columns="5"
                         data-cellSpacing="10"
                         data-cellHeight="50"
                         data-baseWidth="1160"
                         >

                                                                        
                                                                    <div class="emotion--element col-1 row-1 start-col-1 start-row-1 col-xs-5 start-col-xs-1 row-xs-1 start-row-xs-1 col-s-5 start-col-s-1 row-s-1 start-row-s-1 col-m-5 start-col-m-1 row-m-1 start-row-m-1 col-l-5 start-col-l-1 row-l-1 start-row-l-1 col-xl-5 start-col-xl-1 row-xl-1 start-row-xl-1 currentVideoTitle" style="padding-left: 0.625rem; padding-bottom: 0.625rem;">    <div class="emotion--html">

        
            <div class="html--content">
                <p>WEINMYTHEN</p>
            </div>
        
    </div>
</div>                        
                                                            
                                                    
                                                                    <div class="emotion--element col-1 row-1 start-col-1 start-row-1 col-xs-5 start-col-xs-1 row-xs-17 start-row-xs-2 col-s-5 start-col-s-1 row-s-17 start-row-s-2 col-m-5 start-col-m-1 row-m-17 start-row-m-2 col-l-5 start-col-l-1 row-l-17 start-row-l-2 col-xl-5 start-col-xl-1 row-xl-4 start-row-xl-2" style="padding-left: 0.625rem; padding-bottom: 0.625rem;">
    
    
                      <style>
    /* CSS styles for the playlist items */
.playlist-item {
    cursor: pointer;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
    line-height: 2em;
    color: #fff;
    padding: 0 2em;
    transition: all 1s;
}

.currentVideoTitle {
    font-size: x-large;
    text-align: center;
    margin: 0.5em 0 ;
}

/* CSS style for the currently playing video */
.playing {
    font-weight: bold;
    /* color: red; */
    background: #c56567;
}

#ytplcontainer {
    display: flex;
    height: fit-content;
    flex-wrap: wrap;
    justify-content: center;
    /*align-items: center;*/
}

#youtube-wrapper {
    flex: 1 1 auto;
    flex-basis: auto;
    min-width: 30vw;
    justify-content: space-around;
    align-content: center;
    align-items: center;
    max-height: calc(100vh - 55px);
}

#youtube-player {
    aspect-ratio: 16 / 9;
    width: 100%;
    /*max-height: 100%;*/
    height: auto;
    max-height: inherit;
}

#playlist-container {
    width: 19em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /*background: #e9e9e9;*/
    background: #e2aaab;
    /*padding: 1em;*/
    margin-right: 1em;
}

@media (max-width: 800px) {
    #playlist-container {
        order: 1;
        width: 100%;
    }

    .emotion--element {
        padding: 0 !important;
        width: calc(100vw + 20px) !important;
        /*position: relative;*/
        margin-left: -50vw !important;
        left: 50% !important;
        overflow-x: hidden;
        height: auto !important;
        top: 0 !important;
    }
}

.emotion--element {
    position: relative;
}

.col--1 {
    height: 0 !important;
}

footer {
    position: relative;
    top: 6em;
}
@media (min-width: 768px) and (max-width: 1023px) {
    .page-wrap .navigation-main {
        display: none;
    }
}


</style>
<div id="ytplcontainer">
  <!-- HTML container to display the playlist items -->
  <div id="playlist-container"></div>
 
  <div id="youtube-wrapper">
     <div id="youtube-player"></div>
  </div>
</div>

  <!-- Load YouTube iFrame API asynchronously -->
  <script src="https://www.youtube.com/iframe_api"></script>


                    <script type="text/javascript">
                (function() {
    // Replace 'YOUR_PLAYLIST_ID' with the actual ID of your YouTube playlist
    const playlistId = 'PLFsPj08zfLR6mfFqIFGCsAJoNwmCb5b0c';
    let player;
    let playlistReady = false;
    
   function getVideoTitleFromURL() {
      const hash = window.location.hash.slice(1); // Remove the "#" from the hash
      return hash ? decodeURIComponent(hash) : null;
    }

    // Function to get the video index from the playlist based on the video title
    function getVideoIndexFromTitle(videoTitle) {
      const playlistItems = document.querySelectorAll('.playlist-item');
      return Array.from(playlistItems).findIndex((video) => video.textContent === videoTitle);
    }
    function updateURLWithVideoTitle(videoTitle) {
      window.location.hash = videoTitle;
    }
       
    async function fetchPlaylistVideosWithPromise() {
      try {
        const response = await fetch(`/yttest/ytprox.php?playlist_id=${playlistId}`);
        const data = await response.json();
        createPlaylistItems(data);
        playlistReady = true; // Set the flag once playlist is ready
      } catch (error) {
        console.error('Error fetching playlist videos:', error);
      }
    }

    function waitForPlaylistReady() {
      return new Promise((resolve) => {
        const checkReady = () => {
          if (playlistReady) {
            resolve();
          } else {
            setTimeout(checkReady, 100); // Check again after a short delay
          }
        };
        checkReady();
      });
    }

    // Function to load YouTube iFrame API and initialize the player
    function onYouTubeIframeAPIReady() {
      waitForPlaylistReady()
        .then(() => {
         
          const specificVideoTitle = getVideoTitleFromURL();
          let videoIndex=0;
          if (specificVideoTitle) {
            videoIndex = getVideoIndexFromTitle(specificVideoTitle) +1;
            //updatePage(videoIndex-1,specificVideoTitle);
          }
          
          player = new YT.Player('youtube-player', {
            height: '315',
            width: '560',
            playerVars: {
              'autoplay': 1, // Enable autoplay
              'listType': 'playlist', // Set the player to display the playlist
              'list': playlistId, // Set the playlist ID
              'modestbranding': 1, // Enable modest branding
              'index': videoIndex, // Set the index of the video to play (default: 0 for the first video in the playlist)
              'rel': 0,
            },
            events: {
              'onStateChange': onPlayerStateChange,
            },
          });
        })
        .catch((error) => {
          console.error('Error initializing YouTube player:', error);
        });
    }
    
    // Function to create clickable playlist items
    function createPlaylistItems(videos) {
      const playlistContainer = document.getElementById('playlist-container');
      const specificVideoTitle = getVideoTitleFromURL();
      videos.forEach((video,index) => {
        const title = video.title;
        const videoId = video.videoId;
        const videoIndex = index;

        // Create a clickable div element for each video
        const playlistItem = document.createElement('div');
        playlistItem.className = 'playlist-item';
        playlistItem.textContent = title;
        if (specificVideoTitle) {
            if (specificVideoTitle === title) {
              playlistItem.classList.add('playing');
              setCurrentVideoTitle(title);
            }
        } else {
            if (index == 0) {
              playlistItem.classList.add('playing');
              setCurrentVideoTitle(title);
            }
        }

        // Add a click event listener to load the video in the YouTube iframe
        playlistItem.addEventListener('click', (e) => {
          e.currentTarget.classList.add('playing');
          setCurrentVideoTitle(e.currentTarget.innerText);
          //const videoIndex = player.getPlaylist().indexOf(videoId);
          player.playVideoAt(videoIndex);
          //highlightCurrentVideo(videoIndex);
        });

        playlistContainer.appendChild(playlistItem);
      });
    }

    function updatePage(videoIndex,currentVideoTitle) {
        highlightCurrentVideo(videoIndex);
        setCurrentVideoTitle(currentVideoTitle);
        document.title = "GeileWeine - " + currentVideoTitle;
        updateURLWithVideoTitle(currentVideoTitle);
     };
    // Function called when the player state changes (e.g., video ends, etc.)
    function onPlayerStateChange(event) {
      if (event.data === YT.PlayerState.PLAYING) {
        updatePage(player.getPlaylistIndex(),player.getVideoData().title);
      } else if (event.data === YT.PlayerState.ENDED) {
        // Get the index of the next video in the playlist
        const nextVideoIndex = (player.getPlaylistIndex() + 1) % player.getPlaylist().length;
        player.playVideoAt(nextVideoIndex);
      }
    }
  // Function to set the current video title
  function setCurrentVideoTitle(title) {
    const currentVideoTitles = document.querySelectorAll('.currentVideoTitle');
    currentVideoTitles.forEach((titleElement) => {
      titleElement.innerText = title;
    });
  }
    // Function to highlight the currently playing video
    function highlightCurrentVideo(index) {
      const playlistItems = document.querySelectorAll('.playlist-item');

      playlistItems.forEach((item, i) => {
        if (i === index) {
          item.classList.add('playing');
          
        } else {
          item.classList.remove('playing');
        }
      });
    }
    window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
    fetchPlaylistVideosWithPromise(); 
})();
    

            </script>
            

</div>                        
                                                            
                        
                                                                <div class="emotion--sizer-xs col--1" data-rows="18" style="height: 1080px;"></div>
                                                            
                                                                <div class="emotion--sizer-s col--1" data-rows="18" style="height: 1080px;"></div>
                                                            
                                                                <div class="emotion--sizer-m col--1" data-rows="18" style="height: 1080px;"></div>
                                                            
                                                                <div class="emotion--sizer-l col--1" data-rows="18" style="height: 1080px;"></div>
                                                            
                                                                <div class="emotion--sizer-xl col--1" data-rows="5" style="height: 300px;"></div>
                            
                                                        <div class="emotion--sizer col-1" data-rows="1" style="height: 60px;"></div>
                        
                                    </section>