فیلم، در خط

جلد ویدئو - تعبیه شده

جلد ویدیو به شما امکان می دهد با استفاده از یک iframe از ارائه دهندگان خدماتی مانند Youtube، Vimeo و غیره یک ویدیو را جاسازی کنید. علاوه بر این، می توانید از تصویر جلد خود و دکمه پخش سازگار با موضوع برای حفظ کنترل بصری کامل روی صفحه استفاده کنید.

<div class="video-cover border--round">
	<div class="background-image-holder">
		<img alt="image" src="img/bg.jpg" />
	</div>
	<div class="video-play-icon video-play-icon--sm"></div>
	<iframe></iframe>
</div><!--end video cover-->
					

جلد ویدیویی - محلی

این جلد ویدیویی به شما امکان می دهد یک ویدیوی HTML5 میزبان محلی را جاسازی کنید (از فرمت های mp4، webm و ogg استفاده کنید). علاوه بر این، می‌توانید از تصویر جلد و دکمه پخش سازگار با موضوع خود برای حفظ کنترل بصری کامل روی صفحه استفاده کنید.

<div class="video-cover border--round">
	<div class="background-image-holder">
		<img alt="image" src="img.jpg" />
	</div>
	<div class="video-play-icon video-play-icon--sm"></div>
	<video autoplay controls>
		<source src="video/video.webm" type="video/webm">
		<source src="video/video.mp4" type="video/mp4">
		<source src="video/video.ogv" type="video/ogg">
	</video>
</div><!--end video cover-->
					

پخش نماد ویدیو - مدال

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

استفاده از کلاس های پس زمینه در برای تغییر رنگ دکمه پخش .video-play-icon.

<div class="modal-instance">
	<div class="video-play-icon modal-trigger box-shadow bg--primary"></div>
	<div class="modal-container">
		<div class="modal-content bg-dark" data-width="60%" data-height="60%">
			<iframe></iframe>
		</div><!--end of modal-content-->
	</div><!--end of modal-container-->
</div><!--end of modal instance-->
					

دکمه پخش ویدیو - مودال

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

<div class="modal-instance">
	<a class="btn type--uppercase modal-trigger" href="#">
		<span class="btn__text">
			▶ مشاهده پیشنمایش
		</span>
	</a>
	<div class="modal-container">
		<div class="modal-content bg-dark" data-width="60%" data-height="60%">
			<iframe></iframe>
		</div><!--end of modal-content-->
	</div><!--end of modal-container-->
</div><!--end of modal instance-->