Jun. 23, 2019
If you happen to visit Robert Furst.com on a mobile device versus a desktop computer for the main page you will notice that the video is different for both. The same holds for all of the other pages on the site except, instead of the video the visitor is shown an image, to cut down on repeating the same video over and over. The image swapping out is done using HTML and CSS, however, in the case of video, that feature is no longer supported by CSS.
Our solution was taken from Adobe.com. However, the Adobe site had an error, leaving off "properties" from "cfclient.properties.width". I found the solution after multiple attempts with many forums claiming it to not be possible using Coldfusion alone.
<cfclientsettings detectDevice=true /> <cfclient> <cfif cfclient.width lte 480 > <!--Screen is less than or equal to 480 pixels do this --> <cfelseif cfclient.properties.width gte 480 AND cfclient.properties.width lte 760> <!--Screen is greater than 480 pixels but less than 760 pixel do this --> <cfelse> <!--Screen is larger than 760 pixel do this --> </cfif> </cfclient>
There is a limitation you need to be aware of; this is not like an image using CSS to deliver a custom image based on your screen size. In the case of CSS the image will change when you change the size of your browser or when you rotate your phone. Since this technique is checking the screen size on the page load, any change to the size of the screen or the orientation will not change the video. To view the differences you will need two view it on a desktop and a tablet/smartphone to see the different versions.
As for the HTML code for the video itself... Note you can leave off the title, alignment, controls, remove muting, turn autoplay off, and not let it loop. I left them in so that you don't have to go fishing for any of the most common settings.
<video title="Title of the Movie" preload="auto" width="auto" height ="auto" align="center" controls="controls" muted="muted" autoplay="autoplay" loop="loop"> <source src="filename.mp4" type="video/mp4"> <!--if the browser does not support video show this message-- > <p>Custom Message - Your browser does not support video.</p > </video>
Visitor Comments: [Comment] Note: Pages are moderated.