{"id":3700,"date":"2019-07-05T16:07:24","date_gmt":"2019-07-05T13:07:24","guid":{"rendered":"https:\/\/sitecenneti.com\/wordpress\/?p=3700"},"modified":"2019-08-02T00:13:53","modified_gmt":"2019-08-01T21:13:53","slug":"4-16-ortam-dosyalari-video","status":"publish","type":"post","link":"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/4-16-ortam-dosyalari-video\/","title":{"rendered":"4.16 Ortam Dosyalar\u0131 &#8211; Video"},"content":{"rendered":"<div id=\"toc_container\" class=\"toc_transparent no_bullets\"><p class=\"toc_title\">BU DERS\u0130N BA\u015eLIKLARI<\/p><ul class=\"toc_list\"><li><a href=\"#Temaya_Video_Dosyasi_Yukleme\"><span class=\"toc_number toc_depth_1\">1<\/span> Temaya Video Dosyas\u0131 Y\u00fckleme<\/a><ul><li><a href=\"#I-_Ortam_Menusu_Ile_Vidoe_Dosyasi_Yukleme\"><span class=\"toc_number toc_depth_2\">1.1<\/span> I- Ortam Men\u00fcs\u00fc \u0130le Vidoe Dosyas\u0131 Y\u00fckleme<\/a><\/li><li><a href=\"#II-_Blok_Editor_Ile_Video_Dosyasi_Yukleme\"><span class=\"toc_number toc_depth_2\">1.2<\/span> II- Blok Edit\u00f6r \u0130le Video Dosyas\u0131 Y\u00fckleme<\/a><\/li><\/ul><\/li><li><a href=\"#Video_Kisa_Kodu_Video_Shortcode\"><span class=\"toc_number toc_depth_1\">2<\/span> Video K\u0131sa Kodu (Video Shortcode)<\/a><ul><li><a href=\"#Kisa_Kod_Shortcode_Kullanimi_Hakkinda\"><span class=\"toc_number toc_depth_2\">2.1<\/span> K\u0131sa Kod (Shortcode) Kullan\u0131m\u0131 Hakk\u0131nda<\/a><\/li><li><a href=\"#Video_Kisa_Kodu\"><span class=\"toc_number toc_depth_2\">2.2<\/span> Video K\u0131sa Kodu<\/a><\/li><li><a href=\"#Video_Kisa_Kodunun_Ozellikleri\"><span class=\"toc_number toc_depth_2\">2.3<\/span> Video K\u0131sa Kodunun \u00d6zellikleri<\/a><ul><li><a href=\"#I-_Otoplay_Autoplay\"><span class=\"toc_number toc_depth_3\">2.3.1<\/span> I- Otoplay \u2013 Autoplay<\/a><\/li><li><a href=\"#II-_Tekrarlama_Loop\"><span class=\"toc_number toc_depth_3\">2.3.2<\/span> II- Tekrarlama \u2013 Loop<\/a><\/li><li><a href=\"#Ornek-1\"><span class=\"toc_number toc_depth_3\">2.3.3<\/span> \u00d6rnek-1<\/a><\/li><li><a href=\"#III-_Poster\"><span class=\"toc_number toc_depth_3\">2.3.4<\/span> III- Poster<\/a><\/li><li><a href=\"#IV-_Height\"><span class=\"toc_number toc_depth_3\">2.3.5<\/span> IV- Height<\/a><\/li><li><a href=\"#V-_Width\"><span class=\"toc_number toc_depth_3\">2.3.6<\/span> V- Width<\/a><\/li><li><a href=\"#Ornek-2\"><span class=\"toc_number toc_depth_3\">2.3.7<\/span> \u00d6rnek-2<\/a><\/li><li><a href=\"#Ornek-3\"><span class=\"toc_number toc_depth_3\">2.3.8<\/span> \u00d6rnek-3<\/a><\/li><\/ul><\/li><\/ul><\/li><li><a href=\"#Video_Ciktisina_CSS_Uygulama_Islemi\"><span class=\"toc_number toc_depth_1\">3<\/span> Video \u00c7\u0131kt\u0131s\u0131na CSS Uygulama \u0130\u015flemi<\/a><\/li><\/ul><\/div>\n\n<p>WordPress, \u015fu uzant\u0131lar\u0131 ta\u015f\u0131yan video dosyalar\u0131n\u0131 destekler:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>mp4<\/strong><\/li><li><strong>m4v<\/strong><\/li><li><strong>webm<\/strong><\/li><li><strong>ogv<\/strong><\/li><li><strong>wmv<\/strong><\/li><li><strong>flv<\/strong><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Temaya_Video_Dosyasi_Yukleme\">Temaya Video Dosyas\u0131 Y\u00fckleme<\/span><\/h2>\n\n\n\n<p>WordPress temas\u0131na, bir video dosyas\u0131 y\u00fcklemenin 2 yolu vard\u0131r. Bu yollar \u015funlard\u0131r:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"I-_Ortam_Menusu_Ile_Vidoe_Dosyasi_Yukleme\">I- Ortam Men\u00fcs\u00fc \u0130le Vidoe Dosyas\u0131 Y\u00fckleme<\/span><\/h3>\n\n\n\n<p>\u0130lki, y\u00f6netim panelinde bulunan&nbsp;<strong>Ortam-&gt;Yeni ekle<\/strong>&nbsp;men\u00fcs\u00fc ile eklemektir:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"262\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/06\/wordpress-ordam-medya-dosyalari-1024x262.png\" alt=\"WordPress temas\u0131na ortam dosyas\u0131 y\u00fckleme\" class=\"wp-image-3062\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/06\/wordpress-ordam-medya-dosyalari-1024x262.png 1024w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/06\/wordpress-ordam-medya-dosyalari-300x77.png 300w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/06\/wordpress-ordam-medya-dosyalari-768x196.png 768w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/06\/wordpress-ordam-medya-dosyalari.png 1347w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>WordPress Temas\u0131na Video Dosyas\u0131 Y\u00fckleme<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"II-_Blok_Editor_Ile_Video_Dosyasi_Yukleme\">II- Blok Edit\u00f6r \u0130le Video Dosyas\u0131 Y\u00fckleme<\/span><\/h3>\n\n\n\n<p>\u0130kinci y\u00f6ntem ise blok edit\u00f6r yard\u0131m\u0131 ile bir i\u00e7erik d\u00fczenlenirken o i\u00e7erik i\u00e7in bir ses dosyas\u0131 eklemektir. Bunun i\u00e7in, edit\u00f6rde, \u201c<strong>Blok ekle<\/strong>\u201d ikonuna t\u0131klan\u0131r ve a\u00e7\u0131lan k\u00fc\u00e7\u00fck pencerede:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Ortak bloklar-&gt; Video<\/strong>&nbsp;men\u00fcs\u00fc bulunur ve bu men\u00fcye t\u0131klan\u0131r.<\/li><li>Ya da, &#8220;<em>Blok ara<\/em>&#8221; k\u0131sm\u0131na &#8220;<em>video<\/em>&#8221; yaz\u0131larak video blo\u011fu bulunur ve t\u0131klan\u0131r.<\/li><\/ul>\n\n\n\n<p>A\u015fa\u011f\u0131daki resim bu men\u00fcy\u00fc g\u00f6stermektedir: <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"448\" height=\"522\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/07\/Wordpress-video-ekleme.jpg\" alt=\"\" class=\"wp-image-3705\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/07\/Wordpress-video-ekleme.jpg 448w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/07\/Wordpress-video-ekleme-257x300.jpg 257w\" sizes=\"auto, (max-width: 448px) 100vw, 448px\" \/><figcaption>WordPress &#8211; Temaya Video Y\u00fckleme<\/figcaption><\/figure><\/div>\n\n\n\n<p>\u201c<strong>Video<\/strong>\u201d men\u00fcs\u00fc bize, a\u015fa\u011f\u0131da g\u00f6r\u00fcld\u00fc\u011f\u00fc gibi, video dosyas\u0131 y\u00fckleyen\/ekleyen bir blok getirir. Bu blokta g\u00f6rd\u00fc\u011f\u00fcm\u00fcz \u201c<strong>Y\u00fckle<\/strong>\u201d butonu ile bir video dosyas\u0131 y\u00fckleyebiliriz.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"588\" height=\"288\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/07\/Wordpress-video-ekleme-2.jpg\" alt=\"\" class=\"wp-image-3707\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/07\/Wordpress-video-ekleme-2.jpg 588w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/07\/Wordpress-video-ekleme-2-300x147.jpg 300w\" sizes=\"auto, (max-width: 588px) 100vw, 588px\" \/><figcaption>WordPress &#8211; Temaya Video Y\u00fckleme<\/figcaption><\/figure><\/div>\n\n\n\n<p>Video dosyas\u0131 blo\u011fu ile, y\u00fckleme i\u015fleminin yan\u0131 s\u0131ra, \u201c<strong>Ortam k\u00fct\u00fcphanesi<\/strong>\u201d butonunu kullanarak, k\u00fct\u00fcphaneye gidebilir ve daha \u00f6nce y\u00fcklenmi\u015f video dosyalar\u0131n\u0131 ekleyebilir, \u201c<strong>Adresten ekle<\/strong>\u201d butonunu ile de, <em>URL<\/em> adreslerini kullanarak, ba\u015fka sitelerden video dosyalar\u0131 ekleyebilirsiniz.<\/p>\n\n\n\n<p class=\"sc-dikkat\">Bu iki se\u00e7ene\u011fin d\u0131\u015f\u0131nda, tema dosyalar\u0131n\u0131za veya WordPress k\u00fct\u00fcphanesine video y\u00fcklemek i\u00e7in, bir FTP program\u0131 kullanabilirsiniz. Bu y\u00f6ntem tavsiye edilen bir y\u00f6ntem de\u011fildir, \u00e7\u00fcnk\u00fc bu y\u00f6ntem ile y\u00fcklenen ortam dosyalar\u0131, web sitenizin veritaban\u0131nda g\u00f6r\u00fcnmez.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Video_Kisa_Kodu_Video_Shortcode\">Video K\u0131sa Kodu (Video Shortcode)<\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Kisa_Kod_Shortcode_Kullanimi_Hakkinda\">K\u0131sa Kod (Shortcode) Kullan\u0131m\u0131 Hakk\u0131nda<\/span><\/h3>\n\n\n\n<p>K\u0131sa kodlar, WordPress blok edit\u00f6r\u00fcnde, &#8220;<em>K\u0131sa kod&#8221;<\/em> blo\u011funa kodlanarak kullan\u0131l\u0131rlar:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"453\" height=\"520\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/07\/Wordpress-shortcode-ekleme.jpg\" alt=\"WordPress blok edit\u00f6r ile k\u0131sa koda ekleme\" class=\"wp-image-3715\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/07\/Wordpress-shortcode-ekleme.jpg 453w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/07\/Wordpress-shortcode-ekleme-261x300.jpg 261w\" sizes=\"auto, (max-width: 453px) 100vw, 453px\" \/><figcaption>WordPress &#8211; Shortcode (K\u0131sa kod) Blo\u011fu Ekleme<\/figcaption><\/figure><\/div>\n\n\n\n<p>Edit\u00f6r\u00fcn, <em>&#8220;K\u0131sa kod&#8221;<\/em> blo\u011funa bir k\u0131sa kod eklerken, kullanmam\u0131z gereken format \u015fu \u015fekildedir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>[kisakod ayar1=\"degeri1\" ayar2=\"degeri2\"]<\/code><\/pre>\n\n\n\n<p>K\u0131sa kodu ekledi\u011fimizde, k\u0131sa kod blo\u011funun g\u00f6r\u00fcn\u00fcm\u00fc \u015f\u00f6yle olacakt\u0131r:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"608\" height=\"170\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/07\/Wordpress-shortcode-ekleme-2.jpg\" alt=\"WordPress Shortcode (K\u0131sa kod) Blo\u011fu\" class=\"wp-image-3716\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/07\/Wordpress-shortcode-ekleme-2.jpg 608w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/07\/Wordpress-shortcode-ekleme-2-300x84.jpg 300w\" sizes=\"auto, (max-width: 608px) 100vw, 608px\" \/><figcaption>WordPress &#8211; Shortcode (K\u0131sa kod) Blo\u011fu<\/figcaption><\/figure><\/div>\n\n\n\n<p>Blok edit\u00f6rde oldu\u011fu gibi&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/2-1-sablon-template-dosyalari\/\" target=\"_blank\">\u015fablon dosyalar\u0131nda<\/a>&nbsp;da k\u0131sa kodlar kullanabiliriz. Fakat,&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/2-1-sablon-template-dosyalari\/\" target=\"_blank\">\u015fablon dosyalar\u0131nda<\/a> k\u0131sa kodlar\u0131n kullan\u0131m bi\u00e7imi \u015fu \u015fekilde olmal\u0131d\u0131r:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php echo do_shortcode('[kisakod ayar1=\"degeri1\" ayar2=\"degeri2\"]'); ?><\/code><\/pre>\n\n\n\n<p>Biz dersimizin devam\u0131nda, edit\u00f6r kullan\u0131m\u0131n\u0131 tercih edece\u011fiz. Siz dilerseniz, verdi\u011fimiz k\u0131sa kodlar\u0131, yukar\u0131da g\u00f6rd\u00fc\u011f\u00fcn\u00fcz \u015fekliyle,&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/2-1-sablon-template-dosyalari\/\" target=\"_blank\">\u015fablon dosyalar\u0131n\u0131zda<\/a>&nbsp;kullanabilirsiniz.<\/p>\n\n\n\n\t<br \/>\n\t<div class=\"stcnnt-yazi-ici-reklam\">\n\t<span aria-hidden=\"true\" class=\"sc-reklam-basligi text-muted\" style=\"display:block;text-align:center;\">bu bir reklamd\u0131r:<\/span>\n\t<p aria-hidden=\"true\" class=\"shadow-lg m-0 p-0\">\n\t\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t\t<ins class=\"adsbygoogle\"\n\t\t\t style=\"display:block; text-align:center;\"\n\t\t\t data-ad-layout=\"in-article\"\n\t\t\t data-ad-format=\"fluid\"\n\t\t\t data-ad-client=\"ca-pub-6366953309324763\"\n\t\t\t data-ad-slot=\"2001829037\"><\/ins>\n\t\t<script>\n\t\t\t (adsbygoogle = window.adsbygoogle || []).push({});\n\t\t<\/script>\n\t<\/p>\n\t<\/div>\n\t\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Video_Kisa_Kodu\">Video K\u0131sa Kodu<\/span><\/h3>\n\n\n\n<p class=\"sc-dikkat\"><em>Video<\/em> k\u0131sa kodu ile, video dosyas\u0131 y\u00fcklenmez, y\u00fcklenmi\u015f bir video dosyas\u0131 veya ba\u015fka bir <em>URL<\/em> adresindeki bir video dosyas\u0131 temaya \u00e7a\u011f\u0131r\u0131l\u0131r.<\/p>\n\n\n\n<p>Video k\u0131sa kodu, en sade olarak bir <code>src<\/code> parametresi ile birlikte kullan\u0131l\u0131r. <code>Src<\/code> paremetresi, g\u00f6stermek istedi\u011fimiz video dosyas\u0131n\u0131n <em>URL<\/em> de\u011ferini almal\u0131d\u0131r. A\u015fa\u011f\u0131da video k\u0131sa kodunun en sade kullan\u0131m\u0131 verilmi\u015ftir:<\/p>\n\n\n\n<p class=\"sc-dikkat\">!!! A\u015fa\u011f\u0131da verilen k\u0131sa kod \u00f6rneklerinin, \u00e7al\u0131\u015fmas\u0131 i\u00e7in, bu kodlardaki&nbsp;<strong>vidyo<\/strong> ifadesini&nbsp;<strong>video<\/strong> \u015feklinde de\u011fi\u015ftirmeniz gerekmektedir.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>[vidyo src='https:\/\/sitecenneti.com\/wp-content\/uploads\/2019\/07\/ornek-video.mp4']<\/code><\/pre>\n\n\n\n<p>Yukar\u0131daki k\u0131sa kodu ekledi\u011fimizde, temam\u0131zda \u015f\u00f6yle bir video elaman\u0131 olu\u015facakt\u0131r:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"634\" height=\"366\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/07\/Wordpress-video-shortcode-ekleme.jpg\" alt=\"\" class=\"wp-image-3722\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/07\/Wordpress-video-shortcode-ekleme.jpg 634w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/07\/Wordpress-video-shortcode-ekleme-300x173.jpg 300w\" sizes=\"auto, (max-width: 634px) 100vw, 634px\" \/><figcaption>WordPress &#8211; Video K\u0131sa Kodu (Shortcode) Ekleme<\/figcaption><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Video_Kisa_Kodunun_Ozellikleri\">Video K\u0131sa Kodunun \u00d6zellikleri<\/span><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"I-_Otoplay_Autoplay\">I- Otoplay \u2013 Autoplay<\/span><\/h4>\n\n\n\n<p>Video dosyas\u0131 k\u0131sa kodunun&nbsp;<code>autoplay<\/code>&nbsp;\u00f6zelli\u011fi, video dosyas\u0131n\u0131n otomatik \u00e7alma \u00f6zelli\u011fini y\u00f6netir. Bu \u00f6zellik iki de\u011fer al\u0131r. Bunlar \u015funlard\u0131r:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\u201c1\u201d : Video dosyas\u0131n\u0131n sayfa a\u00e7\u0131ld\u0131\u011f\u0131nda otomatik olarak oynamaya ba\u015flamas\u0131n\u0131 sa\u011flar.<\/li><li>\u201c0\u201d \u2013&nbsp;<em>Varsay\u0131lan&nbsp;<\/em>: Video dosyas\u0131n\u0131n oynamaya ba\u015flamas\u0131 i\u00e7in, &#8220;<em>play<\/em>&#8221; butonuna t\u0131klanmas\u0131 gerekir.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"II-_Tekrarlama_Loop\">II- Tekrarlama \u2013 Loop<\/span><\/h4>\n\n\n\n<p>Video dosyas\u0131 k\u0131sa kodunun&nbsp;<code>loop<\/code>&nbsp;\u00f6zelli\u011fi, video dosyas\u0131n\u0131n, bitti\u011finde otomatik olarak ba\u015fa d\u00f6nme ve tekrar \u00e7alma \u00f6zelli\u011fini y\u00f6netir. Bu \u00f6zellik iki de\u011fer al\u0131r. Bunlar \u015funlard\u0131r:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><code>\"on\"<\/code>&nbsp;: Video dosyas\u0131na, bitti\u011finde ba\u015fa d\u00f6nerek, tekrarlama \u00f6zelli\u011fi kazand\u0131r\u0131r.<\/li><li><code>\"off\"<\/code>&nbsp;\u2013&nbsp;<em>Varsay\u0131lan<\/em>&nbsp;: Video dosyas\u0131, bitti\u011finde tekrarlamaz.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"Ornek-1\">\u00d6rnek-1<\/span><\/h4>\n\n\n\n<p>A\u015fa\u011f\u0131daki \u00f6rnek temam\u0131za, <code>ornek-video.mp4<\/code> dosyas\u0131n\u0131 y\u00fckler, videonun bulundu\u011fu sayfa a\u00e7\u0131ld\u0131\u011f\u0131nda, video otomatik olarak oynamaya ba\u015flar ve sona geldi\u011finde otomatik olarak ba\u015fa d\u00f6ner ve tekrar oynamaya ba\u015flar:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>[vidyo mp4=\"https:\/\/sitecenneti.com\/wp-content\/uploads\/2019\/07\/ornek-video.mp4\" loop = \"on\" autoplay = 1]<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"III-_Poster\">III- Poster<\/span><\/h4>\n\n\n\n<p>Poster parametresi, video dosyas\u0131 i\u00e7in bir poster kullanmam\u0131z\u0131 sa\u011flar. Poster, bir \u00e7e\u015fit resim dosyas\u0131d\u0131r ve video oynat\u0131lmaya ba\u015flayana kadar, video dosyas\u0131n\u0131n g\u00f6sterilece\u011fi yerde yer tutucu olarak bulunur.<\/p>\n\n\n\n<p>Poster parametresi, yer tutucu olarak kullanmak istedi\u011fimiz resmin URL de\u011ferini al\u0131r. A\u015fa\u011f\u0131da \u00f6rnek bir kullan\u0131m verilmi\u015ftir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>[vidyo mp4=\"https:\/\/sitecenneti.com\/wp-content\/uploads\/2019\/07\/ornek-video.mp4\" poster= \"https:\/\/sitecenneti.com\/wp-content\/uploads\/2019\/07\/video-cover.jpg\"]<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"IV-_Height\">IV- Height<\/span><\/h4>\n\n\n\n<p>Video dosyas\u0131na pixel cinsinden bir y\u00fckseklik belirtir. Bu parametreyi bo\u015f b\u0131rakt\u0131\u011f\u0131m\u0131zda, video kendi y\u00fcksekli\u011fi ile g\u00f6sterilecektir.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"V-_Width\">V- Width<\/span><\/h4>\n\n\n\n<p>Video dosyas\u0131na pixel cinsinden bir geni\u015flik belirtir. Bu parametreyi bo\u015f b\u0131rakt\u0131\u011f\u0131m\u0131zda, video kendi geni\u015fli\u011fi ile g\u00f6sterilecektir.<\/p>\n\n\n\n<p>Burada belirtece\u011fimiz geni\u015flik de\u011feri, tema ayarlar\u0131 yaparken belirtti\u011fimiz <a href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/2-10-tema-fonksiyonlari\/#Icerik_Genisligi\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"$content_width (yeni sekmede a\u00e7\u0131l\u0131r)\">$content_width<\/a> de\u011ferinden daha b\u00fcy\u00fck olmamal\u0131d\u0131r.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"Ornek-2\">\u00d6rnek-2<\/span><\/h4>\n\n\n\n<p>A\u015fa\u011f\u0131daki \u00f6rnek, <em>ID<\/em> de\u011ferini (<em>1844<\/em>) bildi\u011fimiz bir video dosyas\u0131n\u0131 dinamik olarak \u015fablon dosyam\u0131za ekler.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\n\nwp_get_attachment_url(1844);\necho do_shortcode(\"[vidyo src='$src']\");\n\n?><\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"Ornek-3\">\u00d6rnek-3<\/span><\/h4>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod, k\u00fct\u00fcphanemizde bulunan ve <em>ID<\/em> de\u011feri <em>1844<\/em> olan video dosyas\u0131n\u0131 g\u00f6sterir ve tema dizinimizdeki <code>resimler<\/code> klas\u00f6r\u00fcnde bulunan ve <em>ID<\/em> de\u011feri <em>1827<\/em> olan resmi bu videoya poster olarak kullan\u0131r:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\n\n$video_file = wp_get_attachment_url(1844);\n$poster = wp_get_attachment_image_url(1827);\n\necho do_shortcode('[vidyo mp4=\"' . $video_file . '\" poster = \"' . $poster . '\"]');\n\n?><\/code><\/pre>\n\n\n\n<p class=\"sc-dikkat\">!!! Yukar\u0131da verilen k\u0131sa kod \u00f6rneklerinin, \u00e7al\u0131\u015fmas\u0131 i\u00e7in, bu kodlardaki&nbsp;<strong>vidyo<\/strong> ifadesini&nbsp;<strong>video<\/strong> \u015feklinde de\u011fi\u015ftirmeniz gerekmektedir.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Video_Ciktisina_CSS_Uygulama_Islemi\">Video \u00c7\u0131kt\u0131s\u0131na CSS Uygulama \u0130\u015flemi<\/span><\/h2>\n\n\n\n<p>A\u015fa\u011f\u0131daki video k\u0131sa kodu, <a rel=\"noreferrer noopener\" aria-label=\"\u015fablon dosyam\u0131zda (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/2-1-sablon-template-dosyalari\/\" target=\"_blank\">\u015fablon dosyam\u0131zda<\/a>, bir poster resmi ile birlikte bir video dosyas\u0131 g\u00f6sterir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\n\n$video_file = wp_get_attachment_url(1844);\n$poster = wp_get_attachment_image_url(1827);\n\necho do_shortcode('[vidyo mp4=\"' . $video_file . '\" poster = \"' . $poster . '\"]');\n\n?><\/code><\/pre>\n\n\n\n<p>Bu k\u0131sa kodun, temam\u0131zda \u00fcrettti\u011fi HTML yap\u0131s\u0131 \u015fu \u015fekilde olacakt\u0131r:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div style=\"width: 640px;\" class=\"wp-video\">\n\t&lt;!--[if lt IE 9]>&lt;script>document.createElement('video');&lt;\/script>&lt;![endif]-->\n\t&lt;span class=\"mejs-offscreen\">Video oynat\u0131c\u0131&lt;\/span>\n\t&lt;div id=\"mep_0\" class=\"mejs-container wp-video-shortcode mejs-video\" tabindex=\"0\" role=\"application\" aria-label=\"Video oynat\u0131c\u0131\" style=\"width: 640px; height: 360px; min-width: 221px;\">\n\t\t&lt;div class=\"mejs-inner\">\n\t\t\t&lt;div class=\"mejs-mediaelement\">\n\t\t\t\t&lt;mediaelementwrapper id=\"video-1922-1\">\n\t\t\t\t\t&lt;vidyo class=\"wp-video-shortcode\" id=\"video-1922-1_html5\" poster=\"http:\/\/localhost\/benimsitem\/wp-content\/uploads\/2011\/07\/img_0767-150x150.jpg\" preload=\"metadata\" style=\"width: 640px; height: 360px;\" src=\"http:\/\/localhost\/benimsitem\/wp-content\/uploads\/2019\/05\/mp4-formatinda-video-dosyasinin-adi?_=1\" width=\"640\" height=\"360\">\n\t\t\t\t\t\t&lt;source type=\"video\/mp4\" src=\"https:\/\/sitecenneti.com\/wp-content\/uploads\/2019\/05\/mp4-formatinda-video-dosyasinin-adi?_=1\">\n\t\t\t\t\t\t&lt;a href=\"https:\/\/sitecenneti.com\/wp-content\/uploads\/2019\/05\/A-short-ocean-video.mp4\">\n                           https:\/\/sitecenneti.com\/wp-content\/uploads\/2019\/05\/mp4-formatinda-video-dosyasinin-adi\n\t\t\t\t\t\t&lt;\/a>\n\t\t\t\t\t&lt;\/vidyo>\n\t\t\t\t&lt;\/mediaelementwrapper>\n\t\t\t&lt;\/div>\n\t\t\t&lt;div class=\"mejs-layers\">\n\t\t\t\t&lt;div class=\"mejs-poster mejs-layer\" style=\"background-image: url(\"http:\/\/localhost\/benimsitem\/wp-content\/uploads\/2011\/07\/img_0767-150x150.jpg\"); width: 100%; height: 100%; display: none;\">\n\t\t\t\t\t&lt;img class=\"mejs-poster-img\" src=\"http:\/\/localhost\/benimsitem\/wp-content\/uploads\/2011\/07\/img_0767-150x150.jpg\" width=\"0\" height=\"0\">\n\t\t\t\t&lt;\/div>\n\t\t\t\t&lt;div style=\"width: 100%; height: 100%; display: none;\" class=\"mejs-overlay mejs-layer\">\n\t\t\t\t\t&lt;div class=\"mejs-overlay-loading\">\n\t\t\t\t\t\t&lt;span class=\"mejs-overlay-loading-bg-img\">&lt;\/span>\n\t\t\t\t\t&lt;\/div>\n\t\t\t\t&lt;\/div>\n\t\t\t\t&lt;div style=\"display: none; width: 100%; height: 100%;\" class=\"mejs-overlay mejs-layer\">\n\t\t\t\t\t&lt;div class=\"mejs-overlay-error\">&lt;\/div>\n\t\t\t\t&lt;\/div>\n\t\t\t\t&lt;div class=\"mejs-overlay mejs-layer mejs-overlay-play\" style=\"width: 100%; height: 100%;\">\n\t\t\t\t\t&lt;div class=\"mejs-overlay-button\" role=\"button\" tabindex=\"0\" aria-label=\"Oynat\" aria-pressed=\"false\">&lt;\/div>\n\t\t\t\t&lt;\/div>\n\t\t\t&lt;\/div>\n\t\t\t&lt;div class=\"mejs-controls\" style=\"opacity: 1;\">\n\t\t\t\t&lt;div class=\"mejs-button mejs-playpause-button mejs-play\">\n\t\t\t\t\t&lt;button type=\"button\" aria-controls=\"mep_0\" title=\"Oynat\" aria-label=\"Oynat\" tabindex=\"0\">&lt;\/button>\n\t\t\t\t&lt;\/div>\n\t\t\t\t&lt;div class=\"mejs-time mejs-currenttime-container\" role=\"timer\" aria-live=\"off\">\n\t\t\t\t\t&lt;span class=\"mejs-currenttime\">00:04&lt;\/span>\n\t\t\t\t&lt;\/div>\n\t\t\t\t&lt;div class=\"mejs-time-rail\">\n\t\t\t\t\t&lt;span class=\"mejs-time-total mejs-time-slider\" role=\"slider\" tabindex=\"0\" aria-label=\"Zaman kayd\u0131rac\u0131\" aria-valuemin=\"0\" aria-valuemax=\"12.585215\" aria-valuenow=\"3.655622\" aria-valuetext=\"00:04\">\n\t\t\t\t\t\t&lt;span class=\"mejs-time-buffering\" style=\"display: none;\">&lt;\/span>\n\t\t\t\t\t\t&lt;span class=\"mejs-time-loaded\" style=\"transform: scaleX(0.999851);\">&lt;\/span>\n\t\t\t\t\t\t&lt;span class=\"mejs-time-current\" style=\"transform: scaleX(0.290684);\">&lt;\/span>\n\t\t\t\t\t\t&lt;span class=\"mejs-time-hovered no-hover\" style=\"left: 80px; transform: scaleX(0.388015);\" pos=\"242.85000610351562\">&lt;\/span>\n\t\t\t\t\t\t&lt;span class=\"mejs-time-handle\" style=\"transform: translateX(118px);\">\n\t\t\t\t\t\t\t&lt;span class=\"mejs-time-handle-content\">&lt;\/span>\n\t\t\t\t\t\t&lt;\/span>\n\t\t\t\t\t\t&lt;span class=\"mejs-time-float\" style=\"display: none; left: 242.85px;\">\n\t\t\t\t\t\t\t&lt;span class=\"mejs-time-float-current\">00:07&lt;\/span>\n\t\t\t\t\t\t\t&lt;span class=\"mejs-time-float-corner\">&lt;\/span>\n\t\t\t\t\t\t&lt;\/span>\n\t\t\t\t\t&lt;\/span>\n\t\t\t\t&lt;\/div>\n\t\t\t\t&lt;div class=\"mejs-time mejs-duration-container\">\n\t\t\t\t\t&lt;span class=\"mejs-duration\">00:13&lt;\/span>\n\t\t\t\t&lt;\/div>\n\t\t\t\t&lt;div class=\"mejs-button mejs-volume-button mejs-mute\">\n\t\t\t\t\t&lt;button type=\"button\" aria-controls=\"mep_0\" title=\"Sessiz\" aria-label=\"Sessiz\" tabindex=\"0\">&lt;\/button>\n\t\t\t\t\t&lt;a href=\"javascript:void(0);\" class=\"mejs-volume-slider\" aria-label=\"Ses  kayd\u0131rac\u0131\" aria-valuemin=\"0\" aria-valuemax=\"100\" role=\"slider\" aria-orientation=\"vertical\" aria-valuenow=\"80\" aria-valuetext=\"80%\">\n\t\t\t\t\t\t&lt;span class=\"mejs-offscreen\">Yukar\u0131\/a\u015fa\u011f\u0131 tu\u015flar\u0131 ile sesi art\u0131r\u0131n ya da azalt\u0131n.&lt;\/span>\n\t\t\t\t\t\t&lt;div class=\"mejs-volume-total\">\n\t\t\t\t\t\t\t&lt;div class=\"mejs-volume-current\" style=\"bottom: 0px; height: 80%;\">&lt;\/div>\n\t\t\t\t\t\t\t&lt;div class=\"mejs-volume-handle\" style=\"bottom: 80%; margin-bottom: -3px;\">&lt;\/div>\n\t\t\t\t\t\t&lt;\/div>\n\t\t\t\t\t&lt;\/a>\n\t\t\t\t&lt;\/div>\n\t\t\t\t&lt;div class=\"mejs-button mejs-fullscreen-button\">\n\t\t\t\t\t&lt;button type=\"button\" aria-controls=\"mep_0\" title=\"Tam ekran\" aria-label=\"Tam ekran\" tabindex=\"0\">&lt;\/button>\n\t\t\t\t&lt;\/div>\n\t\t\t&lt;\/div>\n\t\t&lt;\/div>\n\t&lt;\/div>\n&lt;\/div><\/code><\/pre>\n\n\n\n<p>CSS i\u00e7in, a\u015fa\u011f\u0131daki \u00f6rnek, oynat\u0131c\u0131n\u0131n geni\u015flik ve y\u00fckseklik de\u011ferini ayarlar.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.wp-video {\n  width: 420px;\n  height: 280px;\n}<\/code><\/pre>\n\n\n\n<p>Yukar\u0131da verilen HTML \u00e7\u0131kt\u0131s\u0131nda g\u00f6rd\u00fc\u011f\u00fcm\u00fcz CSS class de\u011ferlerine bakarak, video oynat\u0131c\u0131n\u0131z i\u00e7in teman\u0131za \u00f6zel bir stillendirme yapabilirsiniz.<\/p>\n\n\n\n\t<br \/>\n\t<div class=\"stcnnt-yazi-ici-reklam\">\n\t<span aria-hidden=\"true\" class=\"sc-reklam-basligi text-muted\" style=\"display:block;text-align:center;\">bu bir reklamd\u0131r:<\/span>\n\t<p aria-hidden=\"true\" class=\"shadow-lg m-0 p-0\">\n\t\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t\t<ins class=\"adsbygoogle\"\n\t\t\t style=\"display:block; text-align:center;\"\n\t\t\t data-ad-layout=\"in-article\"\n\t\t\t data-ad-format=\"fluid\"\n\t\t\t data-ad-client=\"ca-pub-6366953309324763\"\n\t\t\t data-ad-slot=\"2001829037\"><\/ins>\n\t\t<script>\n\t\t\t (adsbygoogle = window.adsbygoogle || []).push({});\n\t\t<\/script>\n\t<\/p>\n\t<\/div>\n\t\n","protected":false},"excerpt":{"rendered":"<p>WordPress temalar\u0131nda video dosyalar\u0131n\u0131n kullan\u0131m\u0131, \u00f6rnekler ve resimler ile zenginle\u015ftirilerek a\u00e7\u0131klanm\u0131\u015ft\u0131r.<\/p>\n","protected":false},"author":1,"featured_media":25,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[164,166,165],"class_list":["post-3700","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-tema-yapimi","tag-video","tag-video-kisa-kodu","tag-video-shortcode"],"_links":{"self":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts\/3700","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/comments?post=3700"}],"version-history":[{"count":0,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts\/3700\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/media\/25"}],"wp:attachment":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/media?parent=3700"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/categories?post=3700"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/tags?post=3700"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}