zzzzzzz #video-ad-container { position: relative; display: flex; margin: 0 auto; z-index: 2 } .post-content.container-wrapper{ padding:0 !important; position: relative !important; z-index: 100 !important; } .container { position: relative; width: 100%; height: 100%; } .video-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .ad-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .video-content { width: 100%; height: 100%; object-fit: cover; overflow: hidden; } #play-button { display: none; position: absolute; width: 88px; height: 88px; left: calc(50% - 44px); top: calc(50% - 44px); background-color: white; border-radius: 50%; opacity: 0.7; } #play-button:after { position: absolute; left: 26px; top: 18px; content: ' '; background: transparent; box-sizing: border-box; width: 0; height: 48px; border-color: transparent transparent transparent grey; transition: 100ms all ease; cursor: pointer; border-style: solid; border-width: 24px 0 24px 50px; } #play-button:hover { border-color: transparent transparent transparent lightgrey; } #close-button { display: none; position: absolute; right: 4px; top: 4px; width: 24px; height: 24px; opacity: 0.7; background-color: lightgrey; } #close-button:hover { opacity: 1; } #close-button:before, #close-button:after { position: absolute; left: 12px; content: ' '; height: 24px; width: 2px; background-color: black; opacity: 0.7; } #close-button:before { transform: rotate(45deg); } #close-button:after { transform: rotate(-45deg); } @keyframes slideLeft { from { right: -100%; } to { right: 8px; } } document.onload = getVideoDetails(); let videoAdContainer = null; let videoContainer = null; let videoElement = null; let sourceElement = null; let adContainer = null; let playButton = null; let closeButton = null; let videoData = {}; let videoAdContainerOriginalStyle = {}; let videoAdContainerSmallStyle = { width: 256, height: 144, }; let isScrolling = false; let isCloseClicked = false; let autoplay = false; function getVideoDetails() { const url = 'https://mobilews.365scores.com/Data/News/?apptype=1&competitions=7170&filtersourcesout=true&lang=27&limitnews=true&maxcategoriestofill=30&maxnewsitems=30&minnewsitems=0&minnewsitemspercategory=0&newstype=9&onlyinlang=false&startdate=23/02/2020&storeversion=5.2.7&theme=dark&tz=15&uc=122'; return fetch(url) .then((resp) => resp.json()) // Transform the data into json .then(function (data) { const hasItems = data.Items && data.Items.length > 0; if (hasItems) { const itemIndex = getVideoItemIndex(data.Items); if(itemIndex) { const item = data.Items[itemIndex]; const src = item.Videos[0].VID.replace('imagescache', 'imagecache'); videoData.src = src; videoData.poster = item.Videos[0].Thumbnail; videoData.type = item.Videos[0].ContentType; initializeElements(); } } }) } function getVideoItemIndex(items){ return items.map(function(item) { return item.Author; }).indexOf('365Scores'); } //------------------------------------------------------------- //--------------------- Initialize dom elements --------------- //------------------------------------------------------------- function initializeElements() { videoAdContainer = document.getElementById('video-ad-container'); createVideoContainer(); createAdContainerElement(); createVideoElement(); createSourceElement(); createPlayButton(); createCloseButton(); init(); } function createVideoContainer() { videoContainer = document.createElement('div'); const clientWidth = videoAdContainer.dataset.width || document.body.offsetWidth; const width = clientWidth > 480 ? 480 : clientWidth; videoAdContainerOriginalStyle = { width: width, height: (width * 9) /16, x: videoAdContainer.getBoundingClientRect().x, y: videoAdContainer.getBoundingClientRect().y, }; videoContainer.setAttribute('id', 'video-container'); videoContainer.setAttribute('class', 'video-container'); videoContainer.style.width = videoAdContainerOriginalStyle.width + 'px'; videoContainer.style.height = videoAdContainerOriginalStyle.height + 'px'; videoAdContainer.style.width = videoAdContainerOriginalStyle.width + 'px'; videoAdContainer.style.height = videoAdContainerOriginalStyle.height + 'px'; videoAdContainer.appendChild(videoContainer); } function createVideoElement() { videoElement = document.createElement('video'); videoElement.id = 'video-content'; videoElement.class = 'video-content'; videoElement.controls = true; videoElement.playsInline = true; videoElement.muted = true; videoElement.width = videoAdContainerOriginalStyle.width; videoElement.height = videoAdContainerOriginalStyle.height; videoContainer.appendChild(videoElement); } function createSourceElement() { sourceElement = document.createElement('source'); sourceElement.src = videoAdContainer.dataset.videoSource || videoData.src; sourceElement.type = videoData.type; videoElement.appendChild(sourceElement); } function createAdContainerElement() { adContainer = document.createElement('div'); adContainer.id = 'ad-container'; adContainer.class = 'ad-container'; adContainer.style.width = videoAdContainerOriginalStyle.width + 'px'; adContainer.style.height = videoAdContainerOriginalStyle.height + 'px'; videoAdContainer.appendChild(adContainer); } function createPlayButton() { playButton = document.createElement('div'); playButton.id = 'play-button'; playButton.class = 'play-button'; videoAdContainer.appendChild(playButton); } function createCloseButton() { closeButton = document.createElement('div'); closeButton.id = 'close-button'; closeButton.class = 'close-button'; videoAdContainer.appendChild(closeButton); } function onscroll(e) { if(isCloseClicked) { return; } if(window.scrollY === 0){ //when scroll to top isScrolling = false; moveToInitialPosition(); } else { //when scrolling isScrolling = true; if((adsManager && adsManager.getAdSkippableState()) || videoPlaying) { showCloseButton(); } if(videoAdContainer.dataset.sticky) { setStickyAd(); } if(videoAdContainer.dataset.bottomOnscroll) { moveToBottomPosition(); } } } function moveToInitialPosition() { videoAdContainer.style.width = videoAdContainerOriginalStyle.width + 'px'; videoAdContainer.style.height = videoAdContainerOriginalStyle.height + 'px'; videoAdContainer.style.x = videoAdContainerOriginalStyle.x; videoAdContainer.style.y = videoAdContainerOriginalStyle.y; videoAdContainer.style.position = 'relative'; videoAdContainer.style.right = 'unset'; videoAdContainer.style.bottom = 'unset'; videoContent.style.width = videoAdContainerOriginalStyle.width + 'px'; videoContent.style.height = videoAdContainerOriginalStyle.height + 'px'; videoContainer.style.width = videoAdContainerOriginalStyle.width + 'px'; videoContainer.style.height = videoAdContainerOriginalStyle.height + 'px'; adContainer.style.width = videoAdContainerOriginalStyle.width + 'px'; adContainer.style.height = videoAdContainerOriginalStyle.height + 'px'; hideCloseButton(); adsManager.resize(videoAdContainerOriginalStyle.width, videoAdContainerOriginalStyle.height); } function moveToBottomPosition() { videoAdContainer.style.position = 'fixed'; videoAdContainer.style.width = videoAdContainerSmallStyle.width + 'px'; videoAdContainer.style.height = videoAdContainerSmallStyle.height + 'px'; videoAdContainer.style.right = '8px'; videoAdContainer.style.bottom = '50px'; videoContent.style.width = videoAdContainerSmallStyle.width + 'px'; videoContent.style.height = videoAdContainerSmallStyle.height + 'px'; videoContainer.style.width = videoAdContainerSmallStyle.width + 'px'; videoContainer.style.height = videoAdContainerSmallStyle.height + 'px'; adContainer.style.width = videoAdContainerSmallStyle.width + 'px'; adContainer.style.height = videoAdContainerSmallStyle.height + 'px'; adsManager.resize(videoAdContainerSmallStyle.width, videoAdContainerSmallStyle.height); } function setStickyAd() { videoAdContainer.style.position = 'sticky'; videoAdContainer.style.top = '0px'; } // Copyright 2017 Google Inc. // // Licensed under the Apache License, Version 2.0 (the "License"); // you may not use this file except in compliance with the License. // You may obtain a copy of the License at // // https://www.apache.org/licenses/LICENSE-2.0 // // Unless required by applicable law or agreed to in writing, software // distributed under the License is distributed on an "AS IS" BASIS, // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. // See the License for the specific language governing permissions and // limitations under the License. let adsManager; let adsLoader; let adDisplayContainer; let videoContent; let autoplayAllowed; let autoplayRequiresMuted; let adsInitialized; let videoPlaying = true; async function init() { autoplay = videoAdContainer.dataset.autoplay !== "false"; document.onscroll = onscroll; videoContent = videoElement; playButton.addEventListener('click', () => { // Initialize the container. Must be done via a user action where autoplay // is not allowed. adDisplayContainer.initialize(); adsInitialized = true; videoContent.load(); playAds(); }); closeButton.addEventListener('click', () => { isCloseClicked = true; moveToInitialPosition(); hideCloseButton(); videoContent.pause(); }); setUpIMA(); checkAutoplaySupport(); } function setUpIMA() { // Create the ad display container. // We assume the adContainer is the DOM id of the element that will house // the ads. adDisplayContainer = new google.ima.AdDisplayContainer(adContainer, videoContent); // Create ads loader. adsLoader = new google.ima.AdsLoader(adDisplayContainer); adsLoader.getSettings().setDisableCustomPlaybackForIOS10Plus(true); // Listen and respond to ads loaded and error events. adsLoader.addEventListener( google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED, onAdsManagerLoaded, false); adsLoader.addEventListener( google.ima.AdErrorEvent.Type.AD_ERROR, onAdError, false); // An event listener to tell the SDK that our content video // is completed so the SDK can play any post-roll ads. let contentEndedListener = function () { adsLoader.contentComplete(); }; videoContent.onended = contentEndedListener; } function checkAutoplaySupport() { // Test for autoplay support with our content player. let playPromise = playCurrentVideo(); if (playPromise !== undefined) { playPromise.then(onAutoplayWithSoundSuccess).catch(onAutoplayWithSoundFail); } } function onAutoplayWithSoundSuccess() { // If we make it here, unmuted autoplay works. videoContent.pause(); autoplayAllowed = autoplay; autoplayRequiresMuted = true; autoplayChecksResolved(); } function onAutoplayWithSoundFail() { // Unmuted autoplay failed. Now try muted autoplay. checkMutedAutoplaySupport(); } function checkMutedAutoplaySupport() { videoContent.volume = 0; videoContent.muted = true; let playPromise = playCurrentVideo(); if (playPromise !== undefined) { playPromise.then(onMutedAutoplaySuccess).catch(onMutedAutoplayFail); } } function onMutedAutoplaySuccess() { // If we make it here, muted autoplay works but unmuted autoplay does not. videoContent.pause(); autoplayAllowed = autoplay; autoplayRequiresMuted = true; autoplayChecksResolved(); } function onMutedAutoplayFail() { // Both muted and unmuted autoplay failed. Fall back to click to play. videoContent.volume = 1; videoContent.muted = false; autoplayAllowed = false; autoplayRequiresMuted = false; autoplayChecksResolved(); } function autoplayChecksResolved() { // Request video ads. let adsRequest = new google.ima.AdsRequest(); adsRequest.adTagUrl = videoAdContainer.dataset.adTag; // Specify the linear and nonlinear slot sizes. This helps the SDK to // select the correct creative if multiple are returned. adsRequest.linearAdSlotWidth = 640; adsRequest.linearAdSlotHeight = 400; adsRequest.nonLinearAdSlotWidth = 640; adsRequest.nonLinearAdSlotHeight = 150; adsRequest.setAdWillAutoPlay(autoplayAllowed); adsRequest.setAdWillPlayMuted(autoplayRequiresMuted); adsLoader.requestAds(adsRequest); } function playAds() { try { if (!adsInitialized) { adDisplayContainer.initialize(); adsInitialized = true; } const width = isScrolling ? videoAdContainerSmallStyle.width : videoAdContainerOriginalStyle.width; const height = isScrolling ? videoAdContainerSmallStyle.height : videoAdContainerOriginalStyle.height; // Initialize the ads manager. Ad rules playlist will start at this time. adsManager.init(width, height, google.ima.ViewMode.NORMAL); // Call play to start showing the ad. Single video and overlay ads will // start at this time; the call will be ignored for ad rules. adsManager.start(); } catch (adError) { // An error may be thrown if there was a problem with the VAST response. playCurrentVideo(); } hidePlayButton(); } function onAdsManagerLoaded(adsManagerLoadedEvent) { // Get the ads manager. let adsRenderingSettings = new google.ima.AdsRenderingSettings(); adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true; // videoContent should be set to the content video element. adsManager = adsManagerLoadedEvent.getAdsManager( videoContent, adsRenderingSettings); // Mute the ad if doing muted autoplay. const adVolume = (autoplayAllowed && autoplayRequiresMuted) ? 0 : 1; adsManager.setVolume(adVolume); // Add listeners to the required events. adsManager.addEventListener( google.ima.AdErrorEvent.Type.AD_ERROR, onAdError); adsManager.addEventListener( google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED, onContentPauseRequested); adsManager.addEventListener( google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED, onContentResumeRequested); adsManager.addEventListener( google.ima.AdEvent.Type.ALL_ADS_COMPLETED, onAdEvent); // Listen to any additional events, if necessary. adsManager.addEventListener( google.ima.AdEvent.Type.LOADED, onAdEvent); adsManager.addEventListener( google.ima.AdEvent.Type.STARTED, onAdEvent); adsManager.addEventListener( google.ima.AdEvent.Type.COMPLETE, onAdEvent); adsManager.addEventListener( google.ima.AdEvent.Type.SKIPPED, onAdEvent); adsManager.addEventListener( google.ima.AdEvent.Type.SKIPPABLE_STATE_CHANGED, onAdEvent); if (autoplayAllowed && autoplay) { playAds(); } else { showPlayButton(); } } function onAdEvent(adEvent) { // Retrieve the ad from the event. Some events (e.g. ALL_ADS_COMPLETED) // don't have ad object associated. let ad = adEvent.getAd(); switch (adEvent.type) { case google.ima.AdEvent.Type.STARTED: // This event indicates the ad has started - the video player // can adjust the UI, for example display a pause button and // remaining time. if (ad.isLinear()) { // For a linear ad, a timer can be started to poll for // the remaining time. intervalTimer = setInterval( function() { var remainingTime = adsManager.getRemainingTime(); }, 300); // every 300ms } break; case google.ima.AdEvent.Type.COMPLETE: if (ad.isLinear()) { clearInterval(intervalTimer); } adContainer.style.display = 'none'; videoElement.src = videoAdContainer.dataset.videoSource || videoData.src; break; case google.ima.AdEvent.Type.SKIPPED: adContainer.style.display = 'none'; videoElement.src = videoAdContainer.dataset.videoSource || videoData.src; break; case google.ima.AdEvent.Type.LOADED: // This is the first event sent for an ad - it is possible to // determine whether the ad is a video ad or an overlay. if (!ad.isLinear()) { playCurrentVideo(); } break; case google.ima.AdEvent.Type.SKIPPABLE_STATE_CHANGED: if(isScrolling) { showCloseButton(); } else { hideCloseButton(); } break; } } function onAdError(adErrorEvent) { // Handle the error logging. console.log(adErrorEvent.getError()); adsManager.destroy(); adContainer.style.display = 'none'; // // Fall back to playing content. // playCurrentVideo(); } function onContentPauseRequested() { videoPlaying = false; videoContent.pause(); // videoContent.onended = null; } function onContentResumeRequested() { playCurrentVideo(); // videoContent.onended = contentEndedListener; } function playCurrentVideo() { videoPlaying = true; hidePlayButton(); isScrolling && showCloseButton(); return videoContent.play(); } function stopCurrentVideo() { videoPlaying = false; showPlayButton(); return videoContent.pause(); } function showCloseButton() { if(isScrolling && !isCloseClicked) { closeButton.style.display = 'block'; } } function hideCloseButton() { closeButton.style.display = 'none'; } function showPlayButton() { playButton.style.display = 'block'; } function hidePlayButton() { playButton.style.display = 'none'; }
