@media (max-width: 767px) {
.flo-block--9413 {
margin-top: 0rem;
margin-bottom: 0rem;
}
}
@media (min-width: 768px) {
.flo-block--9413 {
margin-top: 0rem;
margin-bottom: 0rem;
}
}
/* START: MENU */
.flo-header--357 .flo-header__menu > div > ul > li > a{font-family: Butler Regular;font-size: 0.75rem;letter-spacing: 0.15em;word-spacing: 0em;line-height: 1.9em;text-transform: none;font-weight: normal;}@media screen and (min-width: 768px) and (max-width: 1024px){.flo-header--357 .flo-header__menu > div > ul > li > a{font-size: 1.05rem;}}@media screen and (max-width: 767px){.flo-header--357 .flo-header__menu > div > ul > li > a{font-size: 0.75rem;}}
.flo-header--357 .flo-header__menu > div > ul > li.current-menu-item > a,
.flo-header--357 .flo-header__menu > div > ul > li.current-menu-parent > a
{
}
.flo-header--357 .flo-header__menu .sub-menu a{font-family: Butler Regular;font-size: 0.75rem;letter-spacing: 0.15em;word-spacing: 0em;line-height: 1.9em;text-transform: none;font-weight: normal;}@media screen and (min-width: 768px) and (max-width: 1024px){.flo-header--357 .flo-header__menu .sub-menu a{font-size: 1.05rem;}}@media screen and (max-width: 767px){.flo-header--357 .flo-header__menu .sub-menu a{font-size: 0.75rem;}}
.flo-header--357 .flo-header__menu .sub-menu li.current-menu-item a,
.flo-header--357 .flo-header__menu .sub-menu li.current-menu-parent a
{
}
/* END: MENU */
/* START: MENU ITEMS GAP */
.flo-header--357.flo-header--type-c .flo-header__menu ul.menu > li,
.flo-header--357.flo-header--type-e .flo-header__menu ul.menu > li {
margin-left: 9.0625rem;
}
.flo-header--357.flo-header--type-d .flo-header__menu ul.menu > li,
.flo-header--357.flo-header--type-f .flo-header__menu ul.menu > li {
margin-right: 9.0625rem;
}
/* END: MENU ITEMS GAP */
/* START: NON STICKY HEADER RULES */
header:not(.is-sticky) .flo-header--357 {
color: #000000;
border-color: rgba(0,0,0,0.1);
padding-top: 1.875rem;
padding-bottom: 1.875rem;
}
/* START: MENU LINES COLOR */
header:not(.is-sticky) .flo-header--357 .flo-header--type-a .flo-header__menu ul.menu li,
header:not(.is-sticky) .flo-header--357 .flo-header--type-b .flo-header__menu ul.menu li,
header:not(.is-sticky) .flo-header--357 .flo-header--type-g .flo-header__menu ul.menu li,
header:not(.is-sticky) .flo-header--357 .flo-header--type-h .flo-header__menu ul.menu li {
border-color: rgba(0,0,0,0.1);
}
/* END: MENU LINES COLOR */
header:not(.is-sticky) .flo-header--357 {
background-color: #ffffff;
}
header:not(.is-sticky) .flo-header--357 .flo-header__menu > ul > li > a {
color: #000000;
}
/* END: NON STICKY HEADER RULES */
/* START: STICKY HEADER RULES */
.flo-header--sticky .is-sticky .flo-header--357 {
background: rgba(242,243,243,1);
color: #000000!important;
border-color: rgba(0,0,0,0.1);
}
/* END: STICKY HEADER RULES */
@media (min-width: 768px) {
.flo-header--357 .flo-header__menu{
width: calc(100% - (9.375rem / 2) );
}
.flo-header--357 .flo-header__menu--right .flo-header__search-wrap .flo-header__search-form,.flo-header--357 .flo-header__menu--right .flo-header__search-wrap .flo-header__search-form .flo-header__search-form-input{
background-color: #f2f3f3!important;
}.flo-header--357 .flo-header__menu--right .flo-header__search-wrap .flo-header__search-form:before{
border-bottom-color: #f2f3f3!important;
}
}
.flo-block-title-4--72 .flo-block-title-4__title{font-family: Cammron Regular;font-size: 1.625rem;letter-spacing: 0.03em;word-spacing: 0em;line-height: 1.27em;text-transform: none;font-weight: normal;}@media screen and (min-width: 768px) and (max-width: 1024px){.flo-block-title-4--72 .flo-block-title-4__title{font-size: 1.8rem;}}@media screen and (max-width: 767px){.flo-block-title-4--72 .flo-block-title-4__title{font-size: 1.4375rem;}}
.flo-block-title-4--72 .flo-block-title-4__subtitle{font-family: Butler Regular;font-size: 0.75rem;letter-spacing: 0.15em;word-spacing: 0em;line-height: 1.9em;text-transform: none;font-weight: normal;}@media screen and (min-width: 768px) and (max-width: 1024px){.flo-block-title-4--72 .flo-block-title-4__subtitle{font-size: 1.05rem;}}@media screen and (max-width: 767px){.flo-block-title-4--72 .flo-block-title-4__subtitle{font-size: 0.75rem;}}
.flo-block-title-4--72 {
color: #000000;
}
.flo-block-title-4--72 .flo-block-title-4__title {
margin-right: -0.03em;
}
@media (max-width: 767px) {
.flo-block--3103 {
margin-top: 0rem;
margin-bottom: 0rem;
}
}
@media (min-width: 768px) {
.flo-block--3103 {
margin-top: 0rem;
margin-bottom: 0rem;
}
}
PORTO VIDEO OPTIONS
Our Video Blocks & Options
.flo-block-text-block-1--792 .flo-block-text-block-1__text-wrap{font-family: Lato Light;font-size: 0.875rem;letter-spacing: 0.03em;word-spacing: 0em;line-height: 1.625em;text-transform: none;font-weight: normal;}@media screen and (min-width: 768px) and (max-width: 1024px){.flo-block-text-block-1--792 .flo-block-text-block-1__text-wrap{font-size: 1.225rem;}}
.flo-block-text-block-1--792 .flo-block-text-block-1__text-wrap {
color: #000000;
}
@media (min-width: 768px) {
.flo-block-text-block-1--792 .flo-block-text-block-1__text-wrap {
max-width: 40vw;
}
}
@media (max-width: 767px) {
.flo-block--3640 {
margin-top: 0rem;
margin-bottom: 0rem;
}
}
@media (min-width: 768px) {
.flo-block--3640 {
margin-top: 0rem;
margin-bottom: 0rem;
}
}
In the following page we show the video options available for your Porto theme. Including slideshows, 2 x video blocks, and a link to a single video gallery.
@media (max-width: 767px) {
.flo-block--2149 {
margin-top: 0rem;
margin-bottom: 0rem;
}
}
@media (min-width: 768px) {
.flo-block--2149 {
margin-top: 0rem;
margin-bottom: 0rem;
}
}
/* START: MENU */
.flo-block-slideshow-1--455 .flo-block-slideshow-1__header-menu > li.current-menu-item > a,
.flo-block-slideshow-1--455 .flo-block-slideshow-1__header-menu > li.current-menu-parent > a
{
}
/* END: MENU */
/* START: FOOTER DELIMITER */
/* END: FOOTER DELIMITER */
/* START: FOOTER LEFT SIDE*/
/* END: FOOTER LEFT SIDE */
/* START: FOOTER MIDDLE AREA */
.flo-block-slideshow-1--455 .flo-block-slideshow-1__footer-middle-area-slide-title-decorative-letter {
font-size: 12.5rem;
}
.flo-block-slideshow-1--455 .flo-block-slideshow-1__footer-middle-area-slide-link {
color: #f2f3f3;
background-color: #000000;
}
/* END: FOOTER MIDDLE AREA */
/* START: FOOTER RIGHT AREA */
/* END: FOOTER RIGHT AREA */
@media (max-width: 767px) {
.flo-block-slideshow-1--455 .flo-block-slideshow-1__mobile-disabled {
display: none;
}
}
@media (min-width: 768px) {
.flo-block-slideshow-1--455 .flo-block-slideshow-1__logo {
width: 26.25rem;
}
}
@media (min-width: 768px) {
.flo-block-slideshow-1--455 .flo-block-slideshow-1__slide-img {
height: 100vh;
}
}
.flo-block-text-block-1--967 .flo-block-text-block-1__text-wrap{font-family: Lato Light;font-size: 0.875rem;letter-spacing: 0.03em;word-spacing: 0em;line-height: 1.625em;text-transform: none;font-weight: normal;}@media screen and (min-width: 768px) and (max-width: 1024px){.flo-block-text-block-1--967 .flo-block-text-block-1__text-wrap{font-size: 1.225rem;}}
.flo-block-text-block-1--967 .flo-block-text-block-1__text-wrap {
color: #000000;
}
@media (min-width: 768px) {
.flo-block-text-block-1--967 .flo-block-text-block-1__text-wrap {
max-width: 40vw;
}
}
@media (max-width: 767px) {
.flo-block--5721 {
margin-top: 0rem;
margin-bottom: 0rem;
}
}
@media (min-width: 768px) {
.flo-block--5721 {
margin-top: 0rem;
margin-bottom: 0rem;
}
}
Above we have a video slideshow, using "slideshow 1" with the "header" and "footer" options disabled to give it a clean look. We've also used the self hosted video option to allow autoplay. However a video embed can also be used (with no autoplay). Any Slideshow layout will offer the same video options.
.flo-block-video-block-1--307 .flo-block-video-block-1__title{font-family: Cammron Light;font-size: 2.375rem;letter-spacing: 0.05em;word-spacing: 0em;line-height: 1.28em;text-transform: uppercase;font-weight: normal;}@media screen and (max-width: 767px){.flo-block-video-block-1--307 .flo-block-video-block-1__title{font-size: 2.3125rem;}}
.flo-block-video-block-1--307 .flo-block-video-block-1__subtitle{font-family: Syncopate Regular;font-size: 0.4375rem;letter-spacing: 0.37em;word-spacing: 0em;line-height: 2.25em;text-transform: uppercase;font-weight: normal;}@media screen and (min-width: 768px) and (max-width: 1024px){.flo-block-video-block-1--307 .flo-block-video-block-1__subtitle{font-size: 0.6125rem;}}@media screen and (max-width: 767px){.flo-block-video-block-1--307 .flo-block-video-block-1__subtitle{font-size: 0.4375rem;}}
.flo-block-video-block-1--307 {
color: #f2f3f3;
}
.flo-video-embed__video-button {
background-color: #f2f3f3;
color: #000000!important;
}
.flo-block-video-block-1--307 .flo-block-video-block-1__image-wrap {
height: 37.5rem;
}
@media (max-width: 767px) {
.flo-block-video-block-1--307 .flo-block-video-block-1__image-wrap {
height: 25rem;
}
}
@media (max-width: 767px) {
.flo-block--289 {
margin-top: 0rem;
margin-bottom: 0rem;
}
}
@media (min-width: 768px) {
.flo-block--289 {
margin-top: 0rem;
margin-bottom: 0rem;
}
}
WEDDING IN AMALFI
March 23, Editorial
.flo-block-text-block-1--502 .flo-block-text-block-1__text-wrap{font-family: Lato Light;font-size: 0.875rem;letter-spacing: 0.03em;word-spacing: 0em;line-height: 1.625em;text-transform: none;font-weight: normal;}@media screen and (min-width: 768px) and (max-width: 1024px){.flo-block-text-block-1--502 .flo-block-text-block-1__text-wrap{font-size: 1.225rem;}}
.flo-block-text-block-1--502 .flo-block-text-block-1__text-wrap {
color: #000000;
}
@media (min-width: 768px) {
.flo-block-text-block-1--502 .flo-block-text-block-1__text-wrap {
max-width: 40vw;
}
}
@media (max-width: 767px) {
.flo-block--8388 {
margin-top: 0rem;
margin-bottom: 0rem;
}
}
@media (min-width: 768px) {
.flo-block--8388 {
margin-top: 0rem;
margin-bottom: 0rem;
}
}
In the above block we use the video block 1, this is a framed block i.e. it is not full width and will have a border around the image and video. A video embed can be added here.
.flo-block-video-block-2--774 .flo-block-video-block-2__title{font-family: Cammron Light;font-size: 2.375rem;letter-spacing: 0.05em;word-spacing: 0em;line-height: 1.28em;text-transform: uppercase;font-weight: normal;}@media screen and (max-width: 767px){.flo-block-video-block-2--774 .flo-block-video-block-2__title{font-size: 2.3125rem;}}
.flo-block-video-block-2--774 .flo-block-video-block-2__subtitle{font-family: Syncopate Regular;font-size: 0.4375rem;letter-spacing: 0.37em;word-spacing: 0em;line-height: 2.25em;text-transform: uppercase;font-weight: normal;}@media screen and (min-width: 768px) and (max-width: 1024px){.flo-block-video-block-2--774 .flo-block-video-block-2__subtitle{font-size: 0.6125rem;}}@media screen and (max-width: 767px){.flo-block-video-block-2--774 .flo-block-video-block-2__subtitle{font-size: 0.4375rem;}}
.flo-block-video-block-2--774 .flo-block-video-block-2__paragraph-text{font-family: Syncopate Regular;font-size: 0.4375rem;letter-spacing: 0.37em;word-spacing: 0em;line-height: 2.25em;text-transform: uppercase;font-weight: normal;}@media screen and (min-width: 768px) and (max-width: 1024px){.flo-block-video-block-2--774 .flo-block-video-block-2__paragraph-text{font-size: 0.6125rem;}}@media screen and (max-width: 767px){.flo-block-video-block-2--774 .flo-block-video-block-2__paragraph-text{font-size: 0.4375rem;}}
.flo-block-video-block-2--774 .flo-block-video-block-2__button{font-family: Butler Regular;font-size: 0.75rem;letter-spacing: 0.15em;word-spacing: 0em;line-height: 1.9em;text-transform: none;font-weight: normal;}@media screen and (min-width: 768px) and (max-width: 1024px){.flo-block-video-block-2--774 .flo-block-video-block-2__button{font-size: 1.05rem;}}@media screen and (max-width: 767px){.flo-block-video-block-2--774 .flo-block-video-block-2__button{font-size: 0.75rem;}}
.flo-block-video-block-2--774 .flo-block-video-block-2__image-wrap {
height: 51.875rem;
justify-content: flex-end;
}
.flo-block-video-block-2--774 {
color: #f2f3f3;
}
.flo-block-video-block-2--774 .flo-block-video-block-2__title {
margin-right: -0.05em;
}
.flo-block-video-block-2--774 .flo-block-video-block-2__button{
color: #f2f3f3;
background-color: #000000;
}
@media (max-width: 767px) {
.flo-block-video-block-2--774 .flo-block-video-block-2__image-wrap {
height: 25rem;
}
}
@media (max-width: 767px) {
.flo-block--2315 {
margin-top: 0rem;
margin-bottom: 0rem;
}
}
@media (min-width: 768px) {
.flo-block--2315 {
margin-top: 0rem;
margin-bottom: 0rem;
}
}
.flo-block-text-block-1--537 .flo-block-text-block-1__text-wrap{font-family: Lato Light;font-size: 0.875rem;letter-spacing: 0.03em;word-spacing: 0em;line-height: 1.625em;text-transform: none;font-weight: normal;}@media screen and (min-width: 768px) and (max-width: 1024px){.flo-block-text-block-1--537 .flo-block-text-block-1__text-wrap{font-size: 1.225rem;}}
.flo-block-text-block-1--537 .flo-block-text-block-1__text-wrap {
color: #000000;
}
@media (min-width: 768px) {
.flo-block-text-block-1--537 .flo-block-text-block-1__text-wrap {
max-width: 40vw;
}
}
@media (max-width: 767px) {
.flo-block--1239 {
margin-top: 0rem;
margin-bottom: 0rem;
}
}
@media (min-width: 768px) {
.flo-block--1239 {
margin-top: 0rem;
margin-bottom: 0rem;
}
}
In the above block we use the video block 2, this is a full width block. A video embed can be added here. Text and a link can also be added.
.flo-block-text-block-4--462 .flo-block-text-block-4__title{font-family: Syncopate Regular;font-size: 0.4375rem;letter-spacing: 0.37em;word-spacing: 0em;line-height: 2.25em;text-transform: uppercase;font-weight: normal;}@media screen and (min-width: 768px) and (max-width: 1024px){.flo-block-text-block-4--462 .flo-block-text-block-4__title{font-size: 0.6125rem;}}@media screen and (max-width: 767px){.flo-block-text-block-4--462 .flo-block-text-block-4__title{font-size: 0.4375rem;}}
.flo-block-text-block-4--462 .flo-block-text-block-4__button{font-family: Butler Regular;font-size: 0.75rem;letter-spacing: 0.15em;word-spacing: 0em;line-height: 1.9em;text-transform: none;font-weight: normal;}@media screen and (min-width: 768px) and (max-width: 1024px){.flo-block-text-block-4--462 .flo-block-text-block-4__button{font-size: 1.05rem;}}@media screen and (max-width: 767px){.flo-block-text-block-4--462 .flo-block-text-block-4__button{font-size: 0.75rem;}}
@media (max-width: 767px) {
.flo-block--386 {
margin-top: 0rem;
margin-bottom: 0rem;
}
}
@media (min-width: 768px) {
.flo-block--386 {
margin-top: 0rem;
margin-bottom: 0rem;
}
}
Check out an example of using video inside a gallery post. All gallery views offer the possibility of adding video to any image. Second image.
VIEW VIDEO GALLERY
