در دنیای طراحی سایت در یزد، استفاده از محتوای ویدیویی، مانند ویدئوهای آپارات، نقش مهمی در جذب کاربران و ارتقای تجربه کاربری ایفا می کند. شرکت های طراحی سایت یزد به‌طور روزافزون از این روش بهره می برند تا سایت های تبلیغاتی پویاتر و جذاب تری را ارائه دهند. در این آموزش، مراحل افزودن و تنظیم اندازه ویدئوهای آپارات در پنل مدیریت محتوای سایت تبلیغاتی را با جزئیات توضیح خواهیم داد تا شما بتوانید به راحتی ویدئوها را متناسب با طراحی سایت خود به نمایش بگذارید.
جهت قراردادن ویدئو از آپارات به سایت، طبق مراحل انجام شده در ویدئو آموزشی زیر، عمل نمایید.
برای سایز دادن به ویدئوهای آپارات در محتوای خود به دو صورت می‌توانید به ویدئوهای آپارات خود عرض بدهید.
- تمام ویدئوهای آپارات درون محتوای مدنظر خود عرض یکسان بگیرند.
- ویدئوهای آپارات درون محتوای مدنظر خود عرض‌های متفاوتی دارند.
حال برای سایز دادن به ویدئوهای آپارات در محتوای خود، کافیست از منو ادیتور Tools را انتخاب نمایید و از زیرمنوهای نمایش داده شده Source code را انتخاب کنید، سپس کدی که از آپارات در اینجا قرارداده اید را مشاهده میکنید.
در صورتی که تمایل داشتید به تمامی ویدئوهای آپارات موجود در محتوای مدنظر عرض یکسانی دهید (مورد 1)، می‌بایست برای عرض ویدئو از دستور width: 400px; استفاده کنید؛ لازم به ذکر است که مقادیر نوشته شده در جلوی دستور بصورت تست می‌باشد.
همچین اگر تمایل دارید که حتما ارتفاع دلخواه خود را به ویدئو بدهید می‌توانید از دستور height: 300px; استفاده نمایید.
برای درک بهتر این آموزش، می‌توانید از ویدیوی زیر بهره بگیرید.
دو دستور فوق را باید در استایلی که از آپارات انتقال داده‌اید در براکت المنت h_iframe-aparat_embed_frame. قرار دهید در زیر برای فهم بهتر مثالی زده شده‌است.
کد آپارات بصورت زیر می‌باشد که در سورس کد قرارداده‌اید.
<style>.h_iframe-aparat_embed_frame{position:relative;}.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%;}</style>
<div class="h_iframe-aparat_embed_frame"><span style="display: block; padding-top: 57%;"></span><iframe src="http://www.aparat.com/video/video/embed/videohash/bVmDe/vt/frame" allowfullscreen="allowfullscreen" data-mce-fragment="1"></iframe></div>
حال میخواهیم به ویدئو خود عرض 300 پیکسل بدهیم، در المنتی که به رنگ سبز نمایش میدهد مقدار width به رنگ قرمز اضافه شده است:
<style>.h_iframe-aparat_embed_frame{position:relative; width: 300px;}.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%;}</style>
<div class="h_iframe-aparat_embed_frame"><span style="display: block; padding-top: 57%;"></span><iframe src="http://www.aparat.com/video/video/embed/videohash/bVmDe/vt/frame" allowfullscreen="allowfullscreen" data-mce-fragment="1"></iframe></div>
در صورتی که تمایل داشتید ویدئوهای آپارات موجود در محتوای مدنظر عرض‌های متفاوتی دهید (مورد 2)، می‌بایست برای عرض ویدئو مانند مورد 1، از دستور style="width: 400px;" استفاده کنید؛
همچین اگر تمایل دارید که حتما ارتفاع دلخواه خود را به ویدئو بدهید می‌توانید از دستور style="height: 300px;" و در صورتی که عرض هم ویدئوی خود داده‌اید باید به صورت style="width: 400px;height: 300px;" استفاده نمایید.
دو دستور فوق را باید در استایلی که از آپارات انتقال داده‌اید درون المنتی که <div class="h_iframe-aparat_embed_frame" دارد، قرار دهید در زیر برای فهم بهتر مثالی زده شده‌است.
کد آپارات بصورت زیر می‌باشد که در سورس کد قرارداده‌اید در کد زیر دو ویدئو آپارات وجود دارد.
<style>.h_iframe-aparat_embed_frame{position:relative;}.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%;}</style>
<div class="h_iframe-aparat_embed_frame"><span style="display: block; padding-top: 57%;"></span><iframe src="http://www.aparat.com/video/video/embed/videohash/bVmDe/vt/frame" allowfullscreen="allowfullscreen" data-mce-fragment="1"></iframe></div>
<div class="h_iframe-aparat_embed_frame"><span style="display: block; padding-top: 57%;"></span><iframe src="http://www.aparat.com/video/video/embed/videohash/bVmDe/vt/frame" allowfullscreen="allowfullscreen" data-mce-fragment="1"></iframe></div>
حال میخواهیم به ویدئو اولی خود عرض 300 پیکسل بدهیم، در المنتی که به رنگ سبز نمایش میدهد مقدار width به رنگ قرمز اضافه شده است:
<style>.h_iframe-aparat_embed_frame{position:relative;}.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%;}</style>
<div class="h_iframe-aparat_embed_frame" style="width: 400px;"><span style="display: block; padding-top: 57%;"></span><iframe src="http://www.aparat.com/video/video/embed/videohash/bVmDe/vt/frame" allowfullscreen="allowfullscreen" data-mce-fragment="1"></iframe></div>
<div class="h_iframe-aparat_embed_frame"><span style="display: block; padding-top: 57%;"></span><iframe src="http://www.aparat.com/video/video/embed/videohash/bVmDe/vt/frame" allowfullscreen="allowfullscreen" data-mce-fragment="1"></iframe></div>
در این حالت ویدئو در سمت راست قرار دارد در صورتی که تمایل دارید ویدئو به وسط صفحه بیاید کافیست دستور margin: 10px auto; را در همان المنتی که مانند مورد 1 عرض را داده‌اید بنویسید، برای نمونه:
<style>.h_iframe-aparat_embed_frame{position:relative; width: 300px; margin: 10px auto;}.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%;}</style>
<div class="h_iframe-aparat_embed_frame"><span style="display: block; padding-top: 57%;"></span><iframe src="http://www.aparat.com/video/video/embed/videohash/bVmDe/vt/frame" allowfullscreen="allowfullscreen" data-mce-fragment="1"></iframe></div>
برای درک بهتر این آموزش، می‌توانید از ویدیوی زیر بهره بگیرید.
نمایش چند ویدئو در یک ردیف
برای قرار دادن چند ویدیو آپارات در یک ردیف ابتدا در منو ادیتور، گزینه Insert را کلیک نمایید و از زیرمنوهای نمایش داده شده، Insert template... را انتخاب کنید، سپس در لیست تمپلیت‌ها، تمپلیت "نمایش چندین آیتم در یک ردیف" را انتخاب کنید، سپس کل متن "محتوای مدنظر خود را در این قسمت قرار دهید." را انتخاب کنید و جای این متن ویدئوهای آپارات خود را قرار دهید، تمامی ویدئوهایی که در این قسمت قرار میدهید، در یک ردیف قرار میگیرند.
در صورتی که از این تمپلیت استفاده کرده بودید و مجدد تمایل داشتید ویدئویی در این قسمت قرار دهید؛ در ادامه ویدئو آموزشی نحوه استفاده از ویدئوهای آپارات در محتوای خود می‌توانید مشاهده کنید. عبارتی که نیاز هست در Source code جستجو کنید <div class="specialFrame" می‌باشد. برای درک بهتر این آموزش، می‌توانید از ویدیوی زیر بهره بگیرید.