With setting the padding values to Zero (0) – the padding-top is then:
/*** to quick css - better to place with the concerning page ID ***/
.mfp-iframe-holder {
padding: 0px !important;
}
.mfp-iframe-holder .mfp-content {
height: 90vh !important; /*** the wanted height ***/
width: 50.625vh; /*** the calculated width is then ***/
}
.mfp-iframe-scaler {
padding-top: 178%; /*** 100 x 16 / 9 = 177.88 ***/
}for an alb that had these aspect-ratio input fields – it would be nice to have another one (for wanted height) if the lightbox case is choosen.
the aspect-ratio is determing the padding-top value. And the wanted height determins the width value:
Calculation on having aspect-ratio of the video and a wanted height.
.mfp-iframe-holder {
padding: 0px !important;
}
.mfp-iframe-holder .mfp-content {
height: (videoHeight)vh !important;
width: (rValue x videoHeight)vh;
}
/*** 100 x Aspect Ratio = rValue ***/
.mfp-iframe-scaler {
padding-top: rValue%;
}das video alb oben hat jetzt die custom-class: video-portrait
damit könnte man nun für alle 9/16 portrait videos zumindest die css Einstellungen setzen.
Änderung in video.php:
if( ( false !== stripos( $src, 'youtube.com/watch' ) ) || ( false !== stripos( $src, 'vimeo.com/' ) ) )
{
$element_styling->add_classes( 'container', 'avia-video-external-service' );
$src .= ( strpos( $src, '?' ) === false ) ? '?autoplay=1' : '&autoplay=1';
$output_html = "<a href='{$src}' class='mfp-iframe lightbox-link' data-custom_class='{$custom_class}'></a>";
}
else if( ! empty( $src ) )
{
$element_styling->add_classes( 'container', 'avia-video-standard-html' );
$output_html = "<a href='{$src}' rel='lightbox' class='mfp-iframe lightbox-link' data-custom_class='{$custom_class}'></a>";
}Änderung in avia-snippet-lightbox.js:
beforeOpen: function()
{
//add custom css class for different styling
if( this.st.el && this.st.el.data('fixed-content') )
{
this.fixedContentPos = true;
}
if( this.st.el && this.st.el.data('custom_class') )
{
var elementCustomClass = this.st.el.attr('data-custom_class');
this.st.mainClass = this.st.mainClass + ' ' + elementCustomClass;
}
},Sie sehen gerade einen Platzhalterinhalt von Facebook. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr InformationenSie sehen gerade einen Platzhalterinhalt von Instagram. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr Informationen