Lavinya.Net Web Günlüğü - Blog » etiket http://www.lavinya.net/blog Lavinya.Net Web Günlüğü - Blog - Web teknolojileri ve haberleri, kültür-sanat, edebiyat ve toplum kategorileri altında kişisel görüş, makale ve bilgilerin aktarıldığı web günlüğü. Fri, 13 Jan 2012 17:55:59 +0000 tr hourly 1 http://wordpress.org/?v=3.3.1 Youtube videoları ve W3c Xhtml kodları http://www.lavinya.net/blog/2008/01/15/youtube-videolari-ve-w3c-xhtml-kodlari/ http://www.lavinya.net/blog/2008/01/15/youtube-videolari-ve-w3c-xhtml-kodlari/#comments Tue, 15 Jan 2008 10:56:02 +0000 bugfixed http://www.lavinya.net/blog/2008/01/15/youtube-videolari-ve-w3c-xhtml-kodlari/ 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.2

Güncelleme: 22 Ağustos 2010

]]> http://www.lavinya.net/blog/2008/01/15/youtube-videolari-ve-w3c-xhtml-kodlari/feed/ 2