Reply To: Video .mp4 not playing and front page video overlay text not styling
Thank you Rodrigo
I appreciate your patience. One last question …… On our front index page (www.tcc-houston.org/index.html) How do you ensure the content over the video file resizes so that on a mobile it fits the screen ? Current it doesnt seem to resize with the or be responsive to the device
<div class=”tp-caption”
data-x=”center” data-hoffset=”[‘-125′,’-125′,’-125′,’-215′]”
data-y=”center” data-voffset=”[‘-50′,’-50′,’-50′,’-75′]”
data-start=”1000″
data-transform_in=”x:[-300%];opacity:0;s:500;”
data-transform_idle=”opacity:0.2;s:500;” style=”z-index: 5;”>
</div>
<div class=”tp-caption text-color-light font-weight-normal”
data-x=”center”
data-y=”center” data-voffset=”[‘-50′,’-50′,’-50′,’-75′]”
data-start=”700″
data-fontsize=”[’22’,’22’,’22’,’40’]”
data-lineheight=”[’25’,’25’,’25’,’45’]”
data-transform_in=”y:[-50%];opacity:0;s:500;” style=”z-index: 5;”>GET READY TO ENGAGE</div>
<div class=”tp-caption d-none d-md-block”
data-frames='[{“delay”:2400,”speed”:500,”frame”:”0″,”from”:”opacity:0;x:10%;”,”to”:”opacity:1;x:0;”,”ease”:”Power3.easeInOut”},{“delay”:”wait”,”speed”:300,”frame”:”999″,”to”:”opacity:0;fb:0;”,”ease”:”Power3.easeInOut”}]’
data-x=”center” data-hoffset=”[’72’,’72’,’72’,’127′]”
data-y=”center” data-voffset=”[‘-33′,’-33′,’-33′,’-55′]” style=”z-index: 5;”>
</div>
<div class=”tp-caption”
data-x=”center” data-hoffset=”[‘125′,’125′,’125′,’215’]”
data-y=”center” data-voffset=”[‘-50′,’-50′,’-50′,’-75′]”
data-start=”1000″
data-transform_in=”x:[300%];opacity:0;s:500;”
data-transform_idle=”opacity:0.2;s:500;” style=”z-index: 5;”></div>
<div class=”tp-caption font-weight-extra-bold text-color-light negative-ls-2″
data-frames='[{“delay”:1000,”speed”:2000,”frame”:”0″,”from”:”sX:1.5;opacity:0;fb:20px;”,”to”:”o:1;fb:0;”,”ease”:”Power3.easeInOut”},{“delay”:”wait”,”speed”:300,”frame”:”999″,”to”:”opacity:0;fb:0;”,”ease”:”Power3.easeInOut”}]’
data-x=”center”
data-y=”center”
data-fontsize=”[’50’,’50’,’50’,’90’]”
data-lineheight=”[’55’,’55’,’55’,’95’]” style=”z-index: 5;”>Innovating Solutions Through Collaboration</div>
<div class=”tp-caption font-weight-light”
data-frames='[{“from”:”opacity:0;”,”speed”:300,”to”:”o:1;”,”delay”:2000,”split”:”chars”,”splitdelay”:0.05,”ease”:”Power2.easeInOut”},{“delay”:”wait”,”speed”:1000,”to”:”y:[100%];”,”mask”:”x:inherit;y:inherit;s:inherit;e:inherit;”,”ease”:”Power2.easeInOut”}]’
data-x=”center”
data-y=”center” data-voffset=”[’40’,’40’,’40’,’80’]”
data-fontsize=”[’20’,’20’,’20’,’50’]”
data-lineheight=”[’20’,’20’,’20’,’55’]”
style=”color: #dedddd; z-index: 5;”>Solving Challenging Technology Problems Through High Impact Programs</div>
I really appreciate any insights
Many thanks
Mark