Youtube videoları ve W3c Xhtml kodları

Merhabalar. Bilindiği gibi youtube videoların embed kodlarını sitenize direkt eklediğinizde w3c xhtml ye uymadığı testlerde hata verdiğini görmüşünüzdür. Sizlerde her sayfanızın xhtml ye tam uygun olmasını isteyenlerdenseniz aşağıdaki kodları incelemenizde fayda var…Youtube video kodlarını iki yöntemle çözebiliriz.

Birincisi swfobject adlı küçük javascript kodları yardımı ile:

  1. Ekteki swfobject 1.5 dosyasını indiriyoruz.
  2. İçinden çıkacak olan swfobject.js dosyasını ftp ile yüklüyoruz.
  3. Bu dosyayı sayfamızın header kısmındaki meta etiketleri <head> </head>arasına ekliyoruz:
    Örnek: <script type="text/javascript" src="swfobject.js"></script>
  4. Daha sonra gene <head></head> etiketleri arasına:

    <style type="text/css">
    #flashcontent {
    border: solid 1px dotted #000;
    width: 425px;
    height: 350px;
    margin: 0 auto 0 auto;
    text-align: center;
    }
    </style>
    Bu kodumuzu ekliyoruz. Ayrıca indireceğiniz dosya içerisindeki örnek kodları inceleyebilirsiniz.
  5. Şimdi aşağıdaki kodu kendi video urlnizi, videonuzun açıklamasını, boyutlarını değiştirerek sayfamıza ekliyoruz:
    <div id="flashcontent">
    <strong>Feridun Düzağaç - Söz Ver Klip video</strong>
    <br /> - You need to upgrade your Flash Player -<br />
    You do not have the Flash plugin installed, or your browser does not support Javascript (you should enable it, perhaps?)
    This page displays your current Flash player version using Javascript.
    </div>
    <div style="text-align: center;">
    <script type="text/javascript">
    // <![CDATA[
    var so = new SWFObject("http://www.youtube.com/v/VgAKpyFOqog", "Söz Ver", "425", "350", "9", "#FFFFFF");
    so.addVariable("flashVarText", "Feridun Düzağaç - Söz Ver Klip video");
    so.addParam("quality", "high");
    so.write("flashcontent");
    // ]]>
    </script>
    </div>
  6. Demosunu bu adresten bakabilirsiniz: http://www.lavinya.net/lyrics/sozver.htm

2. İkinci yöntemimiz ise embed ve object kodlarında düzenleme yaparak.

Standart olarak youtube embed kodu şu şekilde iken:
<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/VgAKpyFOqog">
</param>
<embed src="http://www.youtube.com/v/VgAKpyFOqog"
type="application/x-shockwave-flash"
width="425"
height="350">
</embed>
</object>

Valid xhtml 1.0 kodlarımız ise şu şekilde ediyoruz:
<object width="425" height="350"
type="application/x-shockwave-flash"
data="http://www.youtube.com/v/VgAKpyFOqog">
<param name="movie" value="http://www.youtube.com/v/VgAKpyFOqog" />
</object>

Yukarıdaki youtube video kodumuzdan heigt, width değerlerini kendi video boyutlarına göre değişiyoruz ve data ve value değerlerinin karşısındaki video urlsini kendi video url nizle değişiyoruz.

Hepsi bu 😉 Böylelikle hem erişilebilirlik, hem her tarayıca çalışmasını, hem de geçerli w3c xhtml kodlarına sahip oluyoruz.

Makale: Murat Esgin (Lavinya.Net Webmaster) webadmin[at]lavinya[dot]net

Dosyalar::
Swfobject 2.3

Güncelleme: 22 Ağustos 2010

Youtube videoları ve W3c Xhtml kodları” üzerine 2 düşünce

  1. Green Card

    güzel bir site, konuları da güzel seçiyorsunuz, umarım devamı gelir

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.