Video
Explore FAO's videos: Discover engaging and informative videos from FAO's global initiatives
Overview
Videos are a fundamental content type in Sitefinity CMS, allowing you to create and manage in-depth, informative pieces of content for FAO.org. They are ideal for presenting comprehensive information on various topics, research findings, or detailed explanations of FAO's work and initiatives.
We provide three main components for displaying videos content:
- Card: A compact, visually appealing format for showcasing individual video items.
- List: An efficient way to display multiple videos items in a structured format.
- Detail page: A comprehensive layout for presenting the full videos content with additional information.
Card
<div>
<div class="card-image ratio ratio-3x2">
<iframe
src="https://www.youtube.com/embed/WeoIsjYBQH0?controls=0"
title="Card title"
></iframe>
</div>
<div class="card-body">
<h6 class="title-category">Video</h6>
<h5 class="card-title"><a href="#" class="title-link">Card title</a></h5>
<h6 class="date-location card-date-location">
<span class="location">
<i class="bi bi-geo-alt-fill"></i> Rome, Italy
</span>
<span class="date">26/06/2020</span>
</h6>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of
the card's content.
</p>
<div class="classifications card-classifications d-none">
<div class="tags-list d-none">
<span class="badge text-bg-secondary">Lorem</span
><span class="badge text-bg-secondary">Ipsum</span
><span class="badge text-bg-secondary">Lorem ipsum</span
><span class="badge text-bg-secondary">Lorem</span
><span class="badge text-bg-secondary">Ipsum</span>
</div>
<p class="category-list d-none">
<span class="category-list-title">Categories:</span>
<a href="#" class="me-1"> Lorem, </a
><a href="#" class="me-1"> Ipsum, </a
><a href="#" class="me-1"> Lorem ipsum, </a
><a href="#" class="me-1"> Lorem, </a
><a href="#" class="me-1"> Ipsum, </a>
</p>
<div class="sdg-list d-none">
<span class="sdg-small sdg-1"></span
><span class="sdg-small sdg-2"></span
><span class="sdg-small sdg-3"></span>
</div>
</div>
<a href="#" title="Internal link" class="link-icon" target="_self">
Internal link<i class="bi bi-chevron-right"></i>
</a>
</div>
</div>
List
Player
<div>
<div class="d-list-visual ratio ratio-3x2">
<iframe
src="https://www.youtube.com/embed/WeoIsjYBQH0?controls=0"
title="iframe1"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
></iframe>
</div>
<div class="d-list-content">
<h5 class="title-link"><a href="#">Item title</a></h5>
<h6 class="date-location d-list-date-location">
<span class="location">
<i class="bi bi-geo-alt-fill"></i> Rome, Italy
</span>
<span class="date">26/06/2020</span>
</h6>
<p class="d-list-description">
Some quick example text to build on the card title and make up the bulk of
the card's content.
</p>
<div class="classifications d-list-classifications d-none">
<div class="tags-list d-none">
<span class="badge text-bg-secondary">Lorem</span
><span class="badge text-bg-secondary">Ipsum</span
><span class="badge text-bg-secondary">Lorem ipsum</span
><span class="badge text-bg-secondary">Lorem</span
><span class="badge text-bg-secondary">Ipsum</span>
</div>
<p class="category-list d-none">
<span class="category-list-title">Categories:</span>
<a href="#" class="me-1"> Lorem, </a
><a href="#" class="me-1"> Ipsum, </a
><a href="#" class="me-1"> Lorem ipsum, </a
><a href="#" class="me-1"> Lorem, </a
><a href="#" class="me-1"> Ipsum, </a>
</p>
<div class="sdg-list d-none">
<span class="sdg-list__title">SDGs:</span>
<span class="sdg-small sdg-1"></span
><span class="sdg-small sdg-2"></span
><span class="sdg-small sdg-3"></span>
</div>
</div>
</div>
</div>
Image
<div>
<div class="d-list-visual ratio ratio-3x2">
<a href="#">
<img src="/images/placeholders/card-1.jpg" alt="Item title" />
</a>
</div>
<div class="d-list-content">
<h5 class="title-link"><a href="#">Item title</a></h5>
<h6 class="date-location d-list-date-location">
<span class="location">
<i class="bi bi-geo-alt-fill"></i> Rome, Italy
</span>
<span class="date">26/06/2020</span>
</h6>
<p class="d-list-description">
Some quick example text to build on the card title and make up the bulk of
the card's content.
</p>
<div class="classifications d-list-classifications d-none">
<div class="tags-list d-none">
<span class="badge text-bg-secondary">Lorem</span
><span class="badge text-bg-secondary">Ipsum</span
><span class="badge text-bg-secondary">Lorem ipsum</span
><span class="badge text-bg-secondary">Lorem</span
><span class="badge text-bg-secondary">Ipsum</span>
</div>
<p class="category-list d-none">
<span class="category-list-title">Categories:</span>
<a href="#" class="me-1"> Lorem, </a
><a href="#" class="me-1"> Ipsum, </a
><a href="#" class="me-1"> Lorem ipsum, </a
><a href="#" class="me-1"> Lorem, </a
><a href="#" class="me-1"> Ipsum, </a>
</p>
<div class="sdg-list d-none">
<span class="sdg-list__title">SDGs:</span>
<span class="sdg-small sdg-1"></span
><span class="sdg-small sdg-2"></span
><span class="sdg-small sdg-3"></span>
</div>
</div>
</div>
</div>
Detail page
A comprehensive layout for presenting full videos with additional information and related content. This detailed page provides readers with an in-depth view of the videos content.
Live Preview