Videolity

Videolity Entergrasyon

Web projelerinde iFrame'ler sıkça kullanılır fakat bu bileşenlerin responsive olabilmesi için genellikle ekstra kod eklemek gerekmektedir. Aslında, bu tarz entegrasyonlarda küçük kod eklemeleri olmazsa olmazdır. Çünkü iFrame boyutlarını dinamik(responsive) olarak ayarlamak için bu tür eklemeler gereklidir.

Aşağıda, iFrame'lerin boyutlarının otomatik olarak ayarlanabilmesi için kullanabileceğiniz React, Vue.js ve JavaScript kod örneklerini bulacaksınız. Bu kodların projenize entegre edilmesi, iFrame'lerin dinamik ve responsive olabilmesi için kritik öneme sahiptir. Bu dökümanda, bu konu üzerinde entegrasyon ve kod örnekleri vardır.

Bu projenin Next.JS (React.JS) ile oluşturulmuş kod örneğine buradan erişebilirsiniz.
Canlıda olan landing page örneği ise şu linkte yer almaktadır.

Ana HTML Dosyası için Örnek Kod

Aşağıdaki iframe etiketi ve JavaScript dosya bağlantısını kendi HTML dosyanıza ekleyiniz.

<!DOCTYPE html>


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Web Page Title</title>
</head>
<body>


  <!-- iframe etiketi, gömülecek video için -->
  <iframe id="embeddedIframe" src="http://localhost:3000/iframeContent" style="width:100%;"></iframe>


  <!-- iframe boyutlarını otomatik olarak ayarlayacak olan JavaScript dosyası -->
  <script src="iframeResizer.js"></script>


</body>
</html>

JavaScript için Örnek Kod (iframeResizer.js)

Aşağıda, iframe'in yüksekliğini otomatik olarak ayarlamak için kullanılacak iframeResizer.js adlı JavaScript dosyasının içeriği bulunmaktadır.

// Başlangıçta belirlenmiş en-boy oranı (16:9)
let aspectRatio = 16 / 9;


// İletileri işlemek için bir fonksiyon
function handleMessage(event) {
  if (event.data && event.data.for === 'iframeResize') {
    aspectRatio = event.data.aspectRatio;


    // İlk kez boyutu ayarlayalım
    resizeIframe();
  }
}


// iframe'ın yüksekliğini ayarlayan fonksiyon
function resizeIframe() {
  const iframe = document.querySelector('#embeddedIframe');
  const width = iframe.offsetWidth;


  if (aspectRatio) {
    iframe.style.height = `${width / aspectRatio}px`;
  }
}


// Pencere boyutu değiştiğinde iframe yüksekliğini güncelle
window.addEventListener('resize', resizeIframe);


// iframe'den gelen iletileri dinle
window.addEventListener('message', handleMessage, false);

Açıklamalar

  • aspectRatio: En-boy oranını temsil eder ve baÅŸlangıç deÄŸeri olarak 16:9 atanmıştır.
  • handleMessage: Bu fonksiyon, iframe içeriÄŸinden gelen iletileri iÅŸlemek için kullanılır. Gelen en-boy oranını alır ve resizeIframe fonksiyonunu çağırarak yüksekliÄŸi günceller.
  • resizeIframe: Bu fonksiyon, iframe'in yüksekliÄŸini hesaplar ve ayarlar. aspectRatio deÄŸiÅŸkenini kullanarak bu hesaplamayı yapar.
  • window.addEventListener: Bu iÅŸlemciler, pencere boyutu deÄŸiÅŸtiÄŸinde veya iframe içeriÄŸinden bir ileti geldiÄŸinde tetiklenir. Bu kodları ve etiketleri kendi web sayfasına entegre etmek yeterlidir.
Bu işlemler sonucunda, iframe içerisindeki video otomatik olarak doğru yükseklikte gösterilecektir.

React.js Bileşeni Örneği

Aşağıda, bir React bileşeni olarak tasarlanmış VideoPlayer kod örneğini görebilirsiniz.

import React, { useEffect, useState } from "react";


// VideoPlayer bileşeni, iframe ile gömülen bir video'nun yüksekliğini dinamik olarak ayarlar.
const VideoPlayer = () => {
  // aspectRatio: Başlangıçta belirlenmiş en-boy oranı (16:9 olarak ayarlıdır)
  const [aspectRatio, setAspectRatio] = useState(16 / 9);


  // resizeIframe: Bu fonksiyon, iframe'in yüksekliğini hesaplar ve ayarlar.
  // aspectRatio değişkenini kullanarak bu hesaplamayı yapar.
  const resizeIframe = () => {
    const iframe = document.querySelector("#embeddedIframe");
    const width = iframe.offsetWidth;


    if (aspectRatio) {
      iframe.style.height = `${width / aspectRatio}px`;
    }
  };


  // useEffect: İlk yükleme ve aspectRatio'nun güncellenmesi durumları için tetiklenir.
  useEffect(() => {
    // Pencere boyutu değiştiğinde iframe yüksekliğini güncelle
    window.addEventListener("resize", resizeIframe);


    // handleMessage: Bu fonksiyon, iframe içeriğinden gelen iletileri işler.
    const handleMessage = (event) => {
      if (event.data && event.data.for === "iframeResize") {
        setAspectRatio(event.data.aspectRatio);


        // İlk kez boyutu ayarlayalım
        resizeIframe();
      }
    };


    // iframe'den gelen iletileri dinle
    window.addEventListener("message", handleMessage, false);


    // Event listener'ları temizle
    return () => {
      window.removeEventListener("resize", resizeIframe);
      window.removeEventListener("message", handleMessage);
    };
  }, [aspectRatio]);


  return (
    <div>
      {/* iframe etiketi, gömülecek video için */}
      <iframe
        id="embeddedIframe"
        src="http://localhost:3000/iframeContent"
        style={{ width: "100%" }}
      ></iframe>
    </div>
  );
};


export default VideoPlayer;

Açıklamalar

  • aspectRatio: BaÅŸlangıç deÄŸeri olarak 16:9 atanmış en-boy oranıdır.
  • resizeIframe: iframe'in yüksekliÄŸini hesaplayıp ayarlar.
  • handleMessage: iframe içeriÄŸinden gelen mesajları iÅŸler veaspectRatio'yu günceller.
  • useEffect: BileÅŸenin ilk yüklenmesi ve aspectRatio deÄŸiÅŸiklikleri için tetiklenir.
Bu kodlar ve açıklamalar sayesinde, web sayfasına gömülen video dinamik bir şekilde doğru yükseklikte gösterilecektir. Pencere boyutu değiştiğinde veya yeni bir en-boy oranı bilgisi geldiğinde, yükseklik otomatik olarak güncellenecektir.

Ana HTML Dosyası

Aşağıda bulunan div etiketini kendi HTML dosyanıza ekleyebilirsiniz.

<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Web Page Title</title>
	</head>
	<body>


		<div id="app">
			<video-player></video-player>
		</div>


		<!-- Vue.js'in bağlandığı script etiketi -->
		<script src="main.js"></script>


	</body>
	</html>

Vue.js için Örnek Kod (main.js)

Bu dosyada, Vue.js bileşenini oluşturuyoruz ve onu ana Vue.js uygulamasına monte ediyoruz.

// main.js


import Vue from 'vue';
import VideoPlayer from './VideoPlayer.vue';


new Vue({
	el: '#app',
	components: {
		VideoPlayer
	}
});

VideoPlayer.vue Dosyası

Bu dosyada, bileşenin tamamını oluşturuyoruz.

<!-- VideoPlayer.vue -->


<template>
  <iframe
    id="embeddedIframe"
    :src="videoSrc"
    :style="{ width: '100%', height: computedHeight + 'px' }"
  >
  </iframe>
</template>


<script>
export default {
  data() {
    return {
      aspectRatio: 16 / 9,  // Başlangıçta belirlenmiş en-boy oranı (16:9)
      videoSrc: 'http://localhost:3000/iframeContent',
      computedHeight: 0
    };
  },
  mounted() {
    this.resizeIframe();
    window.addEventListener('resize', this.resizeIframe);
    window.addEventListener('message', this.handleMessage);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeIframe);
    window.removeEventListener('message', this.handleMessage);
  },
  methods: {
    handleMessage(event) {
      if (event.data && event.data.for === 'iframeResize') {
        this.aspectRatio = event.data.aspectRatio;
        this.resizeIframe();
      }
    },
    resizeIframe() {
      const iframe = document.querySelector('#embeddedIframe');
      const width = iframe.offsetWidth;


      if (this.aspectRatio) {
        this.computedHeight = width / this.aspectRatio;
      }
    }
  }
};
</script>

Bu kodlar ve açıklamalar sayesinde, web sayfasına gömülen video dinamik bir şekilde doğru yükseklikte gösterilecektir. Pencere boyutu değiştiğinde veya yeni bir en-boy oranı bilgisi geldiğinde, yükseklik otomatik olarak güncellenecektir.