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 exampleUse 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>