Support Forums

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

VDO not show on iPad

Featured Lock Resolved Issue
Hello

http://private-nirvana.com/en/
The problem about VDO html5 does not show on Safari browser (All device, e.g. PC, iPhone, iPad).
So I use CSS to force change VDO to image on Safari only with this code,
---------------------------------------------------
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 2000px){
::i-block-chrome,.col-to-action-wrapper,.call-to-action-main-wrapper {
background: url(....) no-repeat 50% 0;
background-size: cover;
}
}
---------------------------------------------------
It's work on PC, iPhone but not work on iPad.
The iPad does not show VDO and image on Safari and Chrome browser.

I want the iPad to show image same PC and iPhone.
Please help.

4 Answers

Sifat - Staff

More than a month ago #Permalink
Hi,
Thanks for your query. Please use this css into your custom css to solve this issue.

@media only screen and (device-width: 768px) {
.call-to-action-main-wrapper {
background: url('http://private-nirvana.com/images/slide/pn-02.jpg') no-repeat 50% 0 !important;
background-size: cover !important;
}
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
.call-to-action-main-wrapper {
background: url('http://private-nirvana.com/images/slide/pn-02.jpg') no-repeat 50% 0 !important;
background-size: cover !important;
}
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
.call-to-action-main-wrapper {
background: url('http://private-nirvana.com/images/slide/pn-02.jpg') no-repeat 50% 0 !important;
background-size: cover !important;
}
}


-Best Regards
Hi

Thank you for your code. It is good.

But our client would like to show the video on PCs and all mobile devices.
We tried to custom css but neither Safari nor Chrome browser displays the video, only works on PC.
Please help.

Thanks/Regards,
Thanya

Sifat - Staff

More than a month ago #Permalink
Sometimes background video occurs some issue in iphone and ipad. I found the video isn't playing in mobile devices but you can add this css to show the image in mobile devices.

@media only screen and (max-width: 425px) {
.call-to-action-main-wrapper {
background: url(http://private-nirvana.com/images/slide/pn-02.jpg) no-repeat 50% 0 !important;
background-size: cover !important;
}
}


-Thanks


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Sifat

Sifat

Total Accepted Answers: 152
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 85
Toufiq

Toufiq

Total Accepted Answers: 21
Al Mamun

Al Mamun

Total Accepted Answers: 3
Pavel

Pavel

Total Accepted Answers: 3

113

Templates

289268

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us