lab.elastik

Divers - Bloc 3

Derniers cours : Divers

Les cours sont classés par ordre où ils ont été donnés, du plus récent au plus ancien.

Launch Youtube video when video enters viewport

Divers

How to launch an emnedded Youtube video when it enters the viewport: This can be achieved by leveraging the Intersection Observer API, which allows you to configure a callback function that executes when an observed element enters or exits the viewport.

Important Notes:

    • The YouTube iframe API requires that you append ?enablejsapi=1 to the URL to enable control of the iframe via postMessage.
    • The postMessage method is used to send commands to the YouTube video player, such as playVideo and pauseVideo.

For a single video

				
					<!-- for 1 video -->

<iframe id="youtubeVideo" width="560" height="315" 
        src="https://www.youtube.com/embed/EDkABFzGTGg?enablejsapi=1&mute=1" 
        title="YouTube video player" frameborder="0" 
        allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
        referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var video = document.getElementById('youtubeVideo');
    var options = {
        root: null, // observing relative to viewport
        rootMargin: '0px',
        threshold: 0.5 // trigger when at least 50% of the video is visible
    };

    function handleIntersect(entries, observer) {
        entries.forEach(function(entry) {
            if (entry.isIntersecting) {
                // Video enters the viewport - play the video
                video.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', 'https://www.youtube.com');
            } else {
                // Video exits the viewport - pause the video
                video.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', 'https://www.youtube.com');
            }
        });
    }

    var observer = new IntersectionObserver(handleIntersect, options);
    observer.observe(video);
});
</script>

				
			

For multiple videos

				
					<!-- for several videos  -->

<iframe id="youtubeVideo1" width="560" height="315" 
        src="https://www.youtube.com/embed/EDkABFzGTGg?enablejsapi=1&mute=1" 
        title="YouTube video player" frameborder="0" 
        allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
        referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
        
<hr style="margin-bottom:50vh">

<iframe id="youtubeVideo2" width="560" height="315" 
        src="https://www.youtube.com/embed/_AOA6M9Ta2I?enablejsapi=1&mute=1" 
        title="YouTube video player" frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
        referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var videos = document.querySelectorAll('iframe[id^="youtubeVideo"]'); // Selects iframes with IDs starting with 'youtubeVideo'
    var options = {
        root: null, // observing relative to viewport
        rootMargin: '0px',
        threshold: 0.5 // trigger when at least 50% of the video is visible
    };

    function handleIntersect(entries, observer) {
        entries.forEach(function(entry) {
            if (entry.isIntersecting) {
                // Video enters the viewport - play the video
                entry.target.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', 'https://www.youtube.com');
            } else {
                // Video exits the viewport - pause the video
                entry.target.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', 'https://www.youtube.com');
            }
        });
    }

    var observer = new IntersectionObserver(handleIntersect, options);
    videos.forEach(function(video) {
        observer.observe(video); // Observe each video
    });
});
</script>

				
			

Access Google Spreadsheet via JSON API Endpoint

function doGet(reg) {
    var doc = SpreadsheetApp.getActiveSpreadsheet();
    var sheet = doc.getSheetByName('Sheet1');
    var values = sheet.getDataRange().getValues();
    var output = [];
    for (var i = 0; i < values. length; i++) {
        if (i == 0) {
        continue;
        }
        var row = {}; // Create a new row object for each row
        for (var j = 0; j < 100; j++) {
        if (!values[i][j])
        break;
        row[values[0][j]] = values[i][j];
        }
    output.push(row); // Push the row object to the output array 
    delete row;
    }
    return ContentService.createTextOutput(JSON.stringify({ data: output })).setMimeType (ContentService .MimeType.JSON);
}