0

Below is my code. Video is correctly appearing on mobile emulator in chrome however not appearing on mobile device .. I removed 'autoplay' from video and created a mp4 and webm file type for video. Still no luck. Help? 

<script>
            (function($) {
                var screenWidth = $(window).width();
                if(screenWidth < 1025 && screenWidth > 374   ){


                    customVideo = document.createElement("video");
                    customVideo.setAttribute("id", "mobileVideo");
                    customVideo.controls = true;
                    customVideo.autoplay = false;
                    customVideo.mute = true;
                    customVideo.src = 'https://kauaihp.com/wp-content/themes/KauaiHp/assets/media/KauaiHP_homepage-video_10-11-2017_v4.mp4';
                    customVideo.type = 'video/mp4';
                    customVideo.src = 'https://kauaihp.com/wp-content/themes/KauaiHp/assets/media/KauaiHP_homepage_video_10_09_2017_mp4.webm';
                    customVideo.type = 'video/webm;'

                    console.log('customVideo', customVideo);

                    $('#sliders-container').append(customVideo);
                }
            }) (jQuery);


        </script>
gmatsushima
  • 49
  • 2
  • 9
  • The video itself appears fine - tested and works on Chrome on Android 8.0 without issue. The screen width calculations may be causing the issue - see this answer which may help: https://stackoverflow.com/a/11310353/334402 – Mick Oct 13 '17 at 10:27
  • Thank you @Mick and just to confirm .. Chrome was on a mobile device too? – gmatsushima Oct 13 '17 at 19:32
  • im not sure if it's also being affected to the cache plugin on site - but what my colleagues are showing on their phones (both iPhones) is 'a play' button on screen but when clicked nothing plays .. – gmatsushima Oct 13 '17 at 19:51
  • Yes on Chrome on Android. One problem that sometime happens on a mobile device is the play button gets 'covered' by another element in the page as everything is squashed into the smaller space and the play button can't clicked. You can look at safari on iOS in the inspector using a laptop to check this. – Mick Oct 13 '17 at 21:03
  • Now I'm seeing a strikethrough on play icon - probably has something to do with my outputted html with attributes set as: loop="true" mute="true" autoplay="true" controls="true" – gmatsushima Oct 13 '17 at 22:39
  • @Mick just wanted to thank you as that share about 'covered by another element' helped me reach a solution .. how do I upvote you, your comment via Stackoverflow.com? Thanks again. – gmatsushima Oct 21 '17 at 00:48
  • Glad it helped. I had the same issue previously and some others comments helped me so thats fine! – Mick Oct 21 '17 at 19:57

0 Answers0