Blogger yüklenen videoyu önizleme görseli yapmak

24-04-2024, 19:26:00

#1

TurkGladio

Merhaba, bloggerda konuya eklediğim videoyu otomatik olarak önizleme görseli olarak nasıl tanımlatabilrim?

30-04-2024, 13:13:28

Aşağıda verdiğim kodları temanın html kodlarını düzenleden
<head> </head>arasında bir yerde olacak şekilde yerleştirip kaydedip deneyebilir misiniz.

<script type="text/javascript">
    // Makalelerin önizleme görseli olarak videoyu kullan
    // Bu kod, makale içindeki ilk videoyu otomatik olarak önizleme görseli olarak kullanır

    // Fonksiyon: Blogspot makalelerinin önizleme görselini videoya ayarlar
    function setPreviewImage() {
        // Makalelerin önizleme görseli olarak belirlenen sınıfı seç
        var previewImageElement = document.querySelector('.post-body img');

        // Eğer makale içinde bir önizleme görseli yoksa
        if (!previewImageElement) {
            // Makale içindeki ilk videoyu seç
            var videoElement = document.querySelector('.post-body iframe[src*="youtube"], .post-body iframe[src*="vimeo"]');
            
            // Eğer video bulunduysa
            if (videoElement) {
                // Videoyun önizleme görseli olarak kullanılmasını sağla
                var videoSrc = videoElement.src;
                var thumbnailSrc = videoSrc.replace(/(https?:\/\/(?:www\.)?)?(youtube|vimeo)\.com\/(?:embed\/|video\/)?([a-zA-Z0-9_-]+)/, 'https://img.youtube.com/vi/$3/maxresdefault.jpg');
                previewImageElement = document.createElement('img');
                previewImageElement.src = thumbnailSrc;
                previewImageElement.alt = "Video Önizleme Görseli";
                // Eklemeyi yap
                var postBody = document.querySelector('.post-body');
                postBody.insertBefore(previewImageElement, postBody.firstChild);
            }
        }
    }

    // Sayfa tamamen yüklendiğinde önizleme görseli ayarını yap
    document.addEventListener('DOMContentLoaded', setPreviewImage);
</script>

30-04-2024, 15:27:08

TurkGladio

cnisik adlı üyeden alıntı: mesajı görüntüle

Aşağıda verdiğim kodları temanın html kodlarını düzenleden
<head> </head>arasında bir yerde olacak şekilde yerleştirip kaydedip deneyebilir misiniz.

<script type="text/javascript">
    // Makalelerin önizleme görseli olarak videoyu kullan
    // Bu kod, makale içindeki ilk videoyu otomatik olarak önizleme görseli olarak kullanır

    // Fonksiyon: Blogspot makalelerinin önizleme görselini videoya ayarlar
    function setPreviewImage() {
        // Makalelerin önizleme görseli olarak belirlenen sınıfı seç
        var previewImageElement = document.querySelector('.post-body img');

        // Eğer makale içinde bir önizleme görseli yoksa
        if (!previewImageElement) {
            // Makale içindeki ilk videoyu seç
            var videoElement = document.querySelector('.post-body iframe[src*="youtube"], .post-body iframe[src*="vimeo"]');
            
            // Eğer video bulunduysa
            if (videoElement) {
                // Videoyun önizleme görseli olarak kullanılmasını sağla
                var videoSrc = videoElement.src;
                var thumbnailSrc = videoSrc.replace(/(https?:\/\/(?:www\.)?)?(youtube|vimeo)\.com\/(?:embed\/|video\/)?([a-zA-Z0-9_-]+)/, 'https://img.youtube.com/vi/$3/maxresdefault.jpg');
                previewImageElement = document.createElement('img');
                previewImageElement.src = thumbnailSrc;
                previewImageElement.alt = "Video Önizleme Görseli";
                // Eklemeyi yap
                var postBody = document.querySelector('.post-body');
                postBody.insertBefore(previewImageElement, postBody.firstChild);
            }
        }
    }

    // Sayfa tamamen yüklendiğinde önizleme görseli ayarını yap
    document.addEventListener('DOMContentLoaded', setPreviewImage);
</script>

Merhaba hocam, maalesef olmadı. (video bloggera yüklenen video.)

30-04-2024, 17:01:04

cnisik

Birde bunu dener misin hocam aynı şekilde.

<script type="text/javascript">
    // Makalelerin önizleme görseli olarak videoyu kullan
    // Bu kod, makale içindeki ilk videoyu otomatik olarak önizleme görseli olarak kullanır

    // Fonksiyon: Blogspot makalelerinin önizleme görselini videoya ayarlar
    function setPreviewVideo() {
        // Makalelerin önizleme görseli olarak belirlenen sınıfı seç
        var previewImageElement = document.querySelector('.post-body img');

        // Eğer makale içinde bir önizleme görseli yoksa
        if (!previewImageElement) {
            // Makale içindeki ilk videoyu seç
            var videoElement = document.querySelector('.post-body video');
            
            // Eğer video bulunduysa
            if (videoElement) {
                // Videoyu önizleme görseli olarak kullanılmasını sağla
                var videoSrc = videoElement.getAttribute('src');
                var thumbnailSrc = videoSrc.replace(/\/$/, '') + '?imgmax=800'; // Video URL'sini resim URL'sine dönüştür
                previewImageElement = document.createElement('img');
                previewImageElement.src = thumbnailSrc;
                previewImageElement.alt = "Video Önizleme Görseli";
                // Eklemeyi yap
                var postBody = document.querySelector('.post-body');
                postBody.insertBefore(previewImageElement, postBody.firstChild);
            }
        }
    }

    // Sayfa tamamen yüklendiğinde önizleme görseli ayarını yap
    document.addEventListener('DOMContentLoaded', setPreviewVideo);
</script>

30-04-2024, 20:18:13

TurkGladio

cnisik adlı üyeden alıntı: mesajı görüntüle

Birde bunu dener misin hocam aynı şekilde.

<script type="text/javascript">
    // Makalelerin önizleme görseli olarak videoyu kullan
    // Bu kod, makale içindeki ilk videoyu otomatik olarak önizleme görseli olarak kullanır

    // Fonksiyon: Blogspot makalelerinin önizleme görselini videoya ayarlar
    function setPreviewVideo() {
        // Makalelerin önizleme görseli olarak belirlenen sınıfı seç
        var previewImageElement = document.querySelector('.post-body img');

        // Eğer makale içinde bir önizleme görseli yoksa
        if (!previewImageElement) {
            // Makale içindeki ilk videoyu seç
            var videoElement = document.querySelector('.post-body video');
            
            // Eğer video bulunduysa
            if (videoElement) {
                // Videoyu önizleme görseli olarak kullanılmasını sağla
                var videoSrc = videoElement.getAttribute('src');
                var thumbnailSrc = videoSrc.replace(/\/$/, '') + '?imgmax=800'; // Video URL'sini resim URL'sine dönüştür
                previewImageElement = document.createElement('img');
                previewImageElement.src = thumbnailSrc;
                previewImageElement.alt = "Video Önizleme Görseli";
                // Eklemeyi yap
                var postBody = document.querySelector('.post-body');
                postBody.insertBefore(previewImageElement, postBody.firstChild);
            }
        }
    }

    // Sayfa tamamen yüklendiğinde önizleme görseli ayarını yap
    document.addEventListener('DOMContentLoaded', setPreviewVideo);
</script>

Yok hocam bu da olmadı.

19-05-2024, 22:05:39

#6

TurkGladio

Günceldir.

29-08-2024, 21:53:20

Himen32

cnisik adlı üyeden alıntı: mesajı görüntüle

Aşağıda verdiğim kodları temanın html kodlarını düzenleden
<head> </head>arasında bir yerde olacak şekilde yerleştirip kaydedip deneyebilir misiniz.

<script type="text/javascript">
    // Makalelerin önizleme görseli olarak videoyu kullan
    // Bu kod, makale içindeki ilk videoyu otomatik olarak önizleme görseli olarak kullanır

    // Fonksiyon: Blogspot makalelerinin önizleme görselini videoya ayarlar
    function setPreviewImage() {
        // Makalelerin önizleme görseli olarak belirlenen sınıfı seç
        var previewImageElement = document.querySelector('.post-body img');

        // Eğer makale içinde bir önizleme görseli yoksa
        if (!previewImageElement) {
            // Makale içindeki ilk videoyu seç
            var videoElement = document.querySelector('.post-body iframe[src*="youtube"], .post-body iframe[src*="vimeo"]');
            
            // Eğer video bulunduysa
            if (videoElement) {
                // Videoyun önizleme görseli olarak kullanılmasını sağla
                var videoSrc = videoElement.src;
                var thumbnailSrc = videoSrc.replace(/(https?:\/\/(?:www\.)?)?(youtube|vimeo)\.com\/(?:embed\/|video\/)?([a-zA-Z0-9_-]+)/, 'https://img.youtube.com/vi/$3/maxresdefault.jpg');
                previewImageElement = document.createElement('img');
                previewImageElement.src = thumbnailSrc;
                previewImageElement.alt = "Video Önizleme Görseli";
                // Eklemeyi yap
                var postBody = document.querySelector('.post-body');
                postBody.insertBefore(previewImageElement, postBody.firstChild);
            }
        }
    }

    // Sayfa tamamen yüklendiğinde önizleme görseli ayarını yap
    document.addEventListener('DOMContentLoaded', setPreviewImage);
</script>

Bu kod oluyor. Teşekkür ederim.