آمورش درج ویدیو از آپارات در فروشگاه

مهرشاد ذاکریان
1395-12-08 15:35:59
3256

یکی از سوالاتی که بارها و بارها در انجمن مطرح میشد این بود که چطور میشه از سایت آپارات در فروشگاه های پرستاشاپی ویدیو درج کرد؟

خب پاسخ خیلی ساده بود این که ویرایشگر خود پرستاشاپ این قابلیت رو داره!

با این راه حل ویدیو درج میشد، اما، مشکل این بود که ویدیوی درج شده شکل و شمایل خوبی نداشت.

دلیل نگارش این آموزش هم همین هست. توی این پست آموزشی قصد دارم ترفندی رو به شما آموزش بدم که بتونید ویدیوی خودتون رو از سایت آپارات لا به لای توضیحات محصولتون درج کنید و در عین حال ظاهر زیباتری به نسبت درج توسط ویرایشگر به طور پیشفرض داشته باشه.

پس میریم سر اصل مطلب. این کار بسیار ساده ست و نیاز به دانش خاصی نداره. فقط مرحله به مرحله و با دقت این آموزش رو دنبال کنید:

  • قبل از هر چیز از بخش مدیریت پرستاشاپتون وارد "تنظیمات - عمومی" شده و گزینه اجازه به iframe ها در فیلدهای HTML روی بله بذارید
  • حالا وارد سایت آپارات شوید. زیر ویدیوی آپلود شده کلیدهایی به نام (پسندیدن، دانلود، اشتراک و بیشتر) وجود داره. روی گزینه "بیشتر" موس رو نگه دارید و از منوی باز شده روی "</> ویدیو در سایت شما" کلیک کنید (عکس زیر)

کلید بیشتر در سایت آپارات

  • یک کادر شامل کدی که باید داخل سایت بذارید نمایش داده میشه که شما باید از پایین اون روی "انتخاب نوع کد و اندازه نمایش" کلیک کنید.از سمت چپ نوع کد رو روی "کد iframe" قرار بدید و کدی که در کادر تولید شده رو کپی کنید (عکس زیر)

کد iframe سایت آپارات

  • در صفحه درج/ویرایش محصول در توضیحات بلند روی آیکون درج ویدیو کلیک کنید و از کادر باز شده روی گزینه "جا دادن" کلیک کنید و کدی که از آپارات کپی کرده بودید رو paste کنید. در کدی که درج کردید بعد از عبارت:
    بعد از این کد درج کنید

    این کد رو کپی و ذخیره کنید:
    این کد را درج کنید

درج کد آپارات در ویرایشگر متن پرستاشاپ

  • خب تا اینجا ویدیوی شما درج شد اما مشکل اصلی سایز و شکل و شمایل نمایش ویدیوست که زیاد جالب نیست. برای رفع این مشکل به پوشه themes/yourtheme/css/autoload مراجعه کنید (* بجای yourtheme اسم پوشه قالب شما قرار میگیرد)
  • در اینجا یک فایل جدید به نام aparat.css ایجاد کنید و فایل رو ویرایش کنید. داخل فایل این کدها رو قرار بدید:

.bottom-footer-container .designer-container {text-align: left;}
.footer-container #footer h4:hover, .footer-container #footer h4 a:hover {cursor: text;}
.footer-container #footer h4 a:hover {color: #333;}
.h_iframe-aparat_embed_frame{position:relative;}
.h_iframe-aparat_embed_frame div.block-me {
  display: block;
  padding-top: 57%;
}
.h_iframe-aparat_embed_frame .ratio {display:block;width:100%;height:auto;}
.h_iframe-aparat_embed_frame iframe {position:absolute;top:0;left:0;width:100%; height:100%;}
  • خب کار تمومه. حالا کافیه کش مرورگرتون رو پاک کنید و صفحه محصولتون رو مشاهده کنید

ویدیوی درج شده در فروشگاه پرستاشاپی

فروشگاه اینترنتی خودت رو رایگان در چند دقیقه بساز!

اطلاعات بیشتر
(1 رای)
5 5 1 1
نظرات کاربران
(9)
  • رضا
    1395-12-11

    با سلام و تشکر. طبق آموزش فوق دستورات اجرا شد ولی اخطار" فیلد description (Persian) نامعتبر است. " نمایش داده میشود!! لطفا راهنمایی بفرمایید.www.farnamgostar.com سپاسگزارم

    پاسخ
    پاسخ مدیر:

    درود

    مشکل از لود نشدن تب های محصولتون هست. بهترین کار باز کردن تک تک تب های درج محصول و سپس انجام مراحل آموزش می باشد.

    موفق باشید

  • حسام
    1396-04-03

    با سلام،
    ضمن تشکر از آموزش خوبتون، ولی بنده هم همین خطای قرمز زیر رو دریافت میکنم:
    "فیلد description (پارسی (Persian)) نامعتبر است. "
    این خطا با لود همه تبها، پاک کردن کش و ریلود کامل صفحه هم رفع نشد.
    فقط با حذف ویدیوی ایمبد شده خطا نشون داده نمیشه. و پیام با موفقیت ذخیره شد نمایش داده میشه.

    پاسخ
    پاسخ مدیر:

    درود

    احتمالا شما از بخش تنظیمات - عمومی گزینه اجازه به iframe در فیلدهای HTML رو فعال نکردید

  • داداش علی
    1396-05-23

    سلام
    متاسفانه من با روش شما نتوانستم به نتیجه برسم و روشی دیگر برای این کار پیدا کردم. اگر قالب شما قالبیت اوررایت (Overwrite) روی فایل CSS اصلی قالب (که به طور معمول global.css نام گذاری می شود) را داشته باشد کافیست تا محتوای زیر را در انتهای آن اضافه کنید:
    .h_iframe-aparat_embed_frame {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
    }
    .h_iframe-aparat_embed_frame iframe {
    position: absolute;
    top: 0;
    left:0;
    width: 100%;
    height: 100%;
    }

    پاسخ
    پاسخ مدیر:

    یلام

    آموزش های عمومی در حالت عادی با قالب پیش فرض پرستاشاپ سازگار هستند. ممکن است در برخی قالب ها نیاز به راهکار متفاوتی داشته باشیم

    موفق باشید

  • حسین نادری
    1396-09-21

    ممنون از آموزش خوبتون ...برای من کاملا درست شد با همین آموزش
    http://rayansara.com/home/115-%D8%AF%D8%B3%D8%AA%DA%AF%D8%A7%D9%87-%D8%AD%D8%B6%D9%88%D8%B1-%D9%88-%D8%BA%DB%8C%D8%A7%D8%A8-%D8%AA%D8%B4%D8%AE%DB%8C%D8%B5-%DA%86%D9%87%D8%B1%D9%87-facestation2.html

    پاسخ
  • مهدی
    1396-12-14

    سلام
    اون قسمتی که نوشتید بعد از کد فلان کد فلان را کپی کنید هیچ کدی نشون نمیده برای کپی کردن!!!در کدی که درج کردید بعد از عبارت:

    این کد رو کپی و ذخیره کنید:
    هیچی نیست!!!

    پاسخ
    پاسخ مدیر:

    با تشکر از گزارش شما. اصلاح شد

  • اسماعیل
    1396-12-16

    آموزش خیلی خوبی بود. طبق آموزش تونستم ویدیوهای مورد نظرم رو بین توضیحاتم بذارم
    مرسی آی پرستا

    پاسخ
    پاسخ مدیر:

    خوشحالیم که آموزش مورد استفاده تون قرار گرفت

  • امیر تاجی
    1398-05-27

    ای کاش اموزش ها رو به صورت ویدیویی اموزش میدادید
    اموزش متنی چندین برداشت متفاوت داره

    پاسخ
    پاسخ مدیر:

    سلام

    ممنون از پیشنهادتون. حتما مد نظر قرار میدیم.

    موفق باشید

  • سیامک
    1400-02-29

    من از تم الکترون استفاده میکنم
    توی حالت موبایل ویدئو سایزش بزرگ باقی میمونه و فقط قسمت راست ویدئو نمایش داده میشه , راه حلی داره ؟

    پاسخ
    پاسخ مدیر:

    سلام

    بله تیکت بزنید براتون بررسی می کنیم

  • سید حسن ملاسعیدی
    1401-03-04

    منم دقیقا مشکل آقای سیامک رو دارم

    پاسخ
    پاسخ مدیر:

    سلام. لطفا تیکت بزنید