front-page

S3 VIDEO HOSTING + ADS

https://watch.clickety-clack.click/video-with-ads

  • Opening Bumper
    can be added at any timecode in video
  • Pause Ad
    Click Ad – When paused a page can be displayed
  • Redirect at End
    Video Ends – Redirects to URL (turn off popup-blocker)


Refresh on Reload – Responsive Banner



<div style="position: relative; padding-bottom: 56.25%; height: 0;">
<iframe src='https://watch.clickety-clack.click/watch-reload-banners/watch-clickety-16x9-multi-banner-respon.html' name='Clickable' width='300' height='250' align='center' frameborder='0' marginwidth='0' marginheight='0' scrolling='no' allowtransparency='true' style="position: absolute; top: 0;  left: 0;  max-height: 100vh; width: 100%; height: 100%;"></iframe>
</div>


video player

<div style="overflow:hidden; padding-bottom:56.25%; position:relative;height:0;"><iframe style="left:0; top:0; height:100%; width:100%; position:absolute; max-height: 100vh;" src="https://pagelinktovideofile.html" width="640" height="360" frameborder="0" allowtransparency="true"  allowfullscreen></iframe></div>



Phone Video / Odd aspect ratio

odd sized / aspect ratio example

Use the embed code for an external site – but work out what the % padding should be based on the aspect ratio that specific video has.

Works best alone on a single page as well – if not – decrease the max-height to counteract stuff above it. ALSO added another “overflow:hidden;”

(this one I changed to max-height: 85vh – for example


<div style="overflow:hidden; padding-top:170%; position:relative;height:0;"><iframe style="left:0; top:0; height:100%; width:100%; position:absolute; max-height: 85vh; overflow:hidden;" src="https://see.clickety-clack.click/img/trips/vancouver2023-video/vancouver-suspension-bridge.mp4" width="1032" height="2302"  allowtransparency="true" 
 frameborder="0" scrolling="no" allowfullscreen></iframe></div>



image editor

https://watch.clickety-clack.click/img-editors