How to get YouTube thumbnail image aspect ratio to be 21:9 - sass

<link href="https://www1.chester.ac.uk/sites/all/themes/global/css/app_chester.css" rel="stylesheet"/>
<div style="background: #eaeaea">
<div class="column row">
<div class="m-modal-video__column m-modal-video__column--primary">
<div class="m-modal-video m-modal-video--primary-full-width">
<div class="m-cta__vcenter"><h3 style="color: black; text-align: center;">Be Part of It</h3>
<p style="color: black; text-align: center;">Choose an innovative degree that has been designed with your employability at its core.</p>
</div>
</div>
</div>
<div class="m-modal-video__column m-modal-video__column--secondary">
<div class="m-modal-video m-modal-video--primary-full-width">
<div class="m-cta__vcenter">
<div class="m-modal-video__container m-modal-video__container--cinemascope" data-open="youtubemodal">
<a><img src="http://img.youtube.com/vi/Ily454tCpWE/maxresdefault.jpg">
<div class="m-modal-video__overlay m-modal-video__overlay--triangle">
<div class="m-modal-video m-modal-video__triangle"></div>
</div></a>
</div>
<div class="reveal large" id="youtubemodal" data-reveal data-reset-on-close="true">
<div class="m-video m-video--modal m-video--cinemascope"><iframe src="https://www.youtube.com/embed/Ily454tCpWE" frameborder="0" allowfullscreen=""></iframe></div>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
I've got a modal on my site, and use the following to display a thumbnail image:
http://img.youtube.com/vi/DxwrdB7A6-I/maxresdefault.jpg
The problem is the video has an aspect ratio of 21:9. I've used the following styles, but still get the black letterbox on both the top and bottom of the image. Is there a way to just display the YouTube thumbnail without the black letterbox?
&__container {
position: relative;
height: 0;
padding-bottom: 42.85714%;
overflow: hidden;
margin-bottom: 1rem;
a img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}

I've modified your sample code to add two new CSS rules to correspond to a class your HTML already had with no styles:
.m-modal-video__container--cinemascope defines the container around your cinemascope-ratio image, using the padding-bottom trick you'd previously tried implementing.
.m-modal-video__container--cinemascope img defines the sizing and positioning of the image inside the above container. Knowing you want this image to maintain its aspect ratio and not stretch, I've removed the height: 100% rule (so the height is automatically calculated) and vertically centered the image with the top: 50% and transform: translateY(-50%) trick.
This is all needed because YouTube still produced a 16:9 JPG thumbnail for your video despite its 21:9 ratio, so we're essentially using this trick to hide the black bars in the image. I still see a tiny sliver poking through, but you slightly adjust your padding-bottom ratio if you were worried about that, or increase your img's width past 100%.
.m-modal-video__container--cinemascope {
position: relative;
height: 0;
padding-bottom: 42.85714%;
overflow: hidden;
}
.m-modal-video__container--cinemascope img {
position: absolute;
left: 0;
width: 100%;
top: 50%;
transform: translateY(-50%);
}
<link href="https://www1.chester.ac.uk/sites/all/themes/global/css/app_chester.css" rel="stylesheet" />
<div style="background: #eaeaea">
<div class="column row">
<div class="m-modal-video__column m-modal-video__column--secondary">
<div class="m-modal-video m-modal-video--primary-full-width">
<div class="m-cta__vcenter">
<div class="m-modal-video__container m-modal-video__container--cinemascope" data-open="youtubemodal">
<a><img src="http://img.youtube.com/vi/Ily454tCpWE/maxresdefault.jpg">
<div class="m-modal-video__overlay m-modal-video__overlay--triangle">
<div class="m-modal-video m-modal-video__triangle"></div>
</div>
</a>
</div>
<div class="reveal large" id="youtubemodal" data-reveal data-reset-on-close="true">
<div class="m-video m-video--modal m-video--cinemascope"><iframe src="https://www.youtube.com/embed/Ily454tCpWE" frameborder="0" allowfullscreen=""></iframe></div>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>

Related

How to change the number of columns in Bootstrap grid with Laravel and JQuery Masonry

I know little about Laravel and Masonry grid layout, but I know how Bootstrap framework works.
I need to change the number of columns in a Boostrap grid for small size devices like a mobile phone. Currently, the number of columns is 3 because the class used is col-xs-4. However, I need to change it to col-xs-6, so that it shows 2 columns.
I don't think it's that hard, but I don't know how Laravel works.
I tried searching for those divs in the whole project so that I could directly change those classes, but I couldn't find anything.
This is an example of one column in a row:
<div class="container-fluid">
<div class="row">
<div class="fw-divider-space hidden-below-xl pt-70"></div>
<div class="col-lg-12">
<div data-animation="fadeInDown" class="row isotope-wrapper masonry-layout c-gutter-5 c-mb-5 animate animated fadeInDown" style="position: relative; height: 798px;">
<div class="col-sm-3 col-lg-3 col-lgx-3 col-xl-3 col-xs-4 col-4" style="position: absolute; left: 0%; top: 0px;">
<div class="vertical-item item-gallery content-absolute text-center ds">
<a href="https://www.tusencuentros.cl/modelo/9/ver" class="item-media h-100 w-100 d-block"><img src="https://www.tusencuentros.cl/storage/fotos_perfil/9-1.jpg" alt="Modelo">
<div class="media-links"></div>
</a>
<img src="https://clubvip.cl/storage/watsapp_logo.png" style="width: 40px; height: 40px; margin-top: 5px;"> <i aria-hidden="true" class="fa fa-phone-square" style="font-size: 36px; color: rgb(255, 255, 255); float: right;"></i>
<div class="item-content" style="background-color: rgb(233, 11, 165);">
<div class="item-title" style="top: -80px; width: 100%;">
<div style="display: inline-flex;">
<p style="font-size: 14px;">CARLITA </p>
</div>
<div>
<p style="font-size: 12px;">CHILENA, 20</p>
</div>
<div>
<p style="font-size: 10px;">Medidas: 94-62-98</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I expect the classes col-xs-4 to be col-xs-6.
I assume you use laravel blade
You can use dynamic css class in here like
class="col-sm-3 col-lg-3 col-lgx-3 col-xl-3 {{ $isMobile ? 'col-xs-6' : 'col-xs-4' }} col-4"
In the curly blackets : is this mobile device? if yes, I will use col-xs-6 if not I will use col-xs-4
But you need to send the checking of $isMobile from your controller and there is a very simple component for that here jenssegers/agent
After installation you can perform check for mobile device by using $agent->isMobile() method
Finally I could fix it by finding out that the folder with the file that contains those divs was inside a non-public location called "resources". Since I know little about Laravel Blade, I didn't know the directory structure.

Styling individual tabpanel in Kendo Tabstrip

I'm using the Kendo-UI Tabstrip, and would like to add a class to one specific tabpanel. Is this possible? Using .SpriteCssClasses within the items.Add() section only seems to add the class to the tab itself, and not the actual panel.
Any help is greatly appreciated.
You can try to get the specific panel using the ID because kendo will add a div with specific ID depending on the name of the tab strip and the tab number (order), for example:
#(Html.Kendo().TabStrip()
.Name("Main")
.Items(Main =>
{
Main.Add()
.Text("test1 title").Content(#<text>
test1
</text>);
Main.Add()
.Text("test2 title")
.Content(#<text>
test2
</text>);
})
)
This will generate the following HTML:
<div class="k-tabstrip-wrapper" style="">
<div id="Main" class="k-widget k-tabstrip k-header" data-role="tabstrip" tabindex="0" role="tablist" aria-activedescendant="Main_ts_active">
<ul class="k-reset k-tabstrip-items">
<li class="k-item k-state-default k-first k-tab-on-top k-state-active" role="tab" aria-controls="Main-1" style="" aria-selected="true">
<span class="k-loading k-complete"></span>
test1 title
</li>
<li class="k-item k-state-default k-last" role="tab" aria-controls="Main-2" style="">
<span class="k-loading k-complete"></span>
test2 title
</li>
</ul>
<div id="Main-1" class="k-content k-state-active" role="tabpanel" aria-expanded="true" style="height: auto; overflow: hidden; opacity: 1; display: block;">
<div style="display: none; position: absolute; opacity: 0.8; background-color: rgb(255, 255, 255); z-index: 1001; width: 33.4px; height: 20px;" class="tata-ajax-loader">
<div style="background-position: center;background-repeat: no-repeat;height:100%;width:100%;background-color: transparent;" class="tata-ajax-loader-img"></div>
</div>
test1
</div>
<div id="Main-2" class="k-content" role="tabpanel" aria-expanded="false" style="height: auto; overflow: hidden; opacity: 0; display: none;" aria-hidden="true">
<div style="display: none; position: absolute; opacity: 0.8; background-color: rgb(255, 255, 255); z-index: 1001; width: 33.4px; height: 20px;" class="tata-ajax-loader">
<div style="background-position: center;background-repeat: no-repeat;height:100%;width:100%;background-color: transparent;" class="tata-ajax-loader-img"></div>
</div>
test2
</div>
</div>
</div>
Note the divs with IDs "Main-1" and "Main-2" are the IDs of the actual panels which is what you want from what I understand so you can add CSS on the IDs:
#Main-1 {
background-color: #E3F7A8;
}

Background pattern image with low opacity covers text

I can't understand why is the background pattern opacity lowers the opacity of the text which is above it (Article Name and Article). How to make text with 0% opacity and background opacity 32%?
This is my code:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<div class="main-content">
<h1 class="logo margin-section">Article Name</h1>
<p>Article</p>
</div>
</div>
</div>
And CSS looks like this:
.col-sm-3 {
background-image: url(../images/pattern.png); opacity: 0.32;
margin-left: 7%;
}

Animate.css trigger entrance animations when scrolling down

I'm using Foundation4 as my framework and I want fadein animations to trigger when scrolling down. More like this website: www.isaacpvl.com . I have four divs and they're responsive if these information matters. Thanks to whoever answers! I already tried using firebug and I still can't find how. I'm a newbie when it comes to javascript.
Here are the codes I've done so far. It's just a mock-up to see how things would look like, not too much on the design yet.
<div class="row">
<div style="background-color: black;" id="head" class="large-12 columns">
</div>
</div>
<div class="row">
<div style="background-color: red;" id="section1" class="large-6 columns">
</div>
<div style="background-color: red;" id="section1" class="large-6 columns">
<img class="animated fadeInRight" src="img/hongkong/hongkongdragon.gif" />
</div>
</div>
<div class="row">
<div style="background-color: blue;" id="section2" class="large-12 columns">
</div>
</div>
that's the body so far and the css of the divs
.row.full-width { width: 100%; max-width: 100%; }
.row {min-width:100% !important; background-color: black;}
.section1{
/*background-image: url("../img/hongkong/background.png");*/
background-color:red;
position: relative;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.section2{
/*background-image: url("../img/hongkong/background.png");*/
background-color: black;
position: relative;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
As you can see there is an image source with the animated class, that's the image that I want to animate. It's a full-screen kind of website.
I'm using animate.css from http://daneden.me/animate/ btw

image does not center (on mobile view) with bootstrap 3.0

I have a small website using Bootstrap 3.0 RC1 and I am just trying to center a simple image (with responsive rendering)
So everything seems to work on desktop devices, but when I look at my website on a small device like a mobile, the image is resized (thats good) but NOT perfectly centered.....
I am puzzled..
Any idea?
Many thanks in advance,
I use the following code :
<body style="display: block;">
<section class="container">
<header>
<div class="row">
<div class="col-lg-6 col-offset-3">
<center><img src="img/grey_wash_wall.png" class="text-center" title="Hello" alt="World"></center>
</div>
</div>
<div class="row">
<div class="title col-lg-12">
<h1>Welcome to my website</h1>
</div>
</div>
</header>
You're missing a closing bracket on your .container CSS.
.container {
max-width: 700px;
background:white;
padding: 30px 50px;
margin: 20px auto;
text-align: center;
}
EDIT:
I'm unable to replicate this behavior on a mobile-sized browser window using the markup you provided. jsFiddle

Resources