0

Hi I want to show block which depends on browser in concrete4 8.5.1 CMS Once block will have GIF and other will have AV1 video. But as AV1 is not supported by all browser I will like to show gif and the one which supports will hide the GIF and show AV1. PHP version is 7.3

I have tried differnet css but did not work https://rafael.adm.br/css_browser_selector/

Parth Parikh
  • 9
  • 4
  • Seem answer by @Telmo Dias worked for chrome and firefox but .ie for IE is not working. It takes css applied to .gecko which is for firefox. I am using IE 11. Is there any other script which identifies browser more accurately? other than https://rafael.adm.br/css_browser_selector/ this script – Parth Parikh Aug 03 '19 at 10:57
  • This is an already very well debated and documented question. Please refer to these 2 answers : https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser and https://stackoverflow.com/questions/2400935/browser-detection-in-javascript – Telmo Dias Aug 09 '19 at 04:02

2 Answers2

0

Try to detect with modernizr the browser feature needed to reproduce the video:

https://modernizr.com/download?setclasses

You can look in specific for video: https://modernizr.com/download?video-setclasses&q=video

Modernize give you true or false on each feature you check, for example you can check html5video, if true then add class .active to the video container if not add .active to the gif container.

red
  • 1,334
  • 6
  • 25
0

Without knowing your code, and based on the particular browser selector example you posted, I would suggest the following approach. Let's say IE doesn't support video, and chrome does, and you have 2 separate containers with class="gif" for the container with the gif and class="video" for the container with the video:

.video {
  display: none;
}
.gif {
  display: none;
} 
.ie .gif {
  display: inline-block;
}
.chrome .video {
  display: inline-block;
}
Telmo Dias
  • 3,247
  • 2
  • 30
  • 41
  • This worked, the error I did was trying to place the script inside the page. Tried to load it in header and used the css provided by you and it worked of Mozila and Chrome. Still testing for IE – Parth Parikh Aug 03 '19 at 10:41