insert video to transformation

web dev asked on July 25, 2018 18:59

hello kentico dev i tray to apply a slider which have 3 images and video i create page type slider and field file to upload the slider is good but the video not working here is my transformation <li class="item" data-masterspeed="1500" data-slotamount="7" data-transition="fade"> <span class="shadow-top"></span> <img alt="" src="<%# GetFileUrl("Image") %>"> <span class="shadow-bottom"></span> <a href="#"> <div class="tp-caption small_thin_grey customin customout" data-captionhidden="on" data-customin="x:0;y:100;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:3;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:0% 0%;" data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;" data-easing="Power4.easeOut" data-endeasing="Power4.easeIn" data-endspeed="500" data-hoffset="0" data-speed="1200" data-start="1000" data-voffset="-400" data-x="center" data-y="bottom" style="z-index: 1"> <h2 class="text-center"><%# Eval("Title") %></h2> </div> <div class="tp-caption small_thin_grey customin customout" data-captionhidden="on" data-customin="x:0;y:100;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:3;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:0% 0%;" data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;" data-easing="Power4.easeOut" data-endeasing="Power4.easeIn" data-endspeed="500" data-hoffset="0" data-speed="1200" data-start="1600" data-voffset="-340" data-x="center" data-y="bottom" style="z-index: 2"> <p class="text-center"><%# Eval("SubTitle") %></p> </div></a> </li> any one have idea how read video in transformation with slider Image

Correct Answer

Anton Grekhovodov answered on July 25, 2018 19:47

Hi, Except img tag, you need to use video tag. Example:

<video controls
   muted
   src="<%# GetFileUrl("Image") %>"
   width="300"
   height="200">
</video>

Maybe you need to add a condition in your transformation to understand what type of asset it is and (image or video) and render a specific HTML markup for this asset.

1 votesVote for this answer Unmark Correct answer