Mobile Responsive Video and Images

Hello, I am really happy with the way my Sydney themed website looks on the desktop however on the mobile my YouTube video in the header is non responsive and is hidden behind the logo.

I also have two images that are side by side on the desktop but i would like them to be one on top of the other on the mobile with a “mailto:” link.

Here is my website: www.droneonyorkshire.com

Any help would be greatly appreciated,

Many thanks in advance,

Alex

Hello Alex,

It looks like the video header is now being disabled which doesn’t allow me to inspect how it actually looks like. Would mind re-enabling it?

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 800px) {
      .galleryid-20,
      .galleryid-20 .gallery-item {
        width: 360px;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
      }  
      .galleryid-20 .gallery-item {
        display: block;
        float: none;
      }   
    }

To enable mailto link on each image, try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
;(function($) {
  if( $('.galleryid-20').length ) {

    var email1 = 'David@droneonyorkshire.com';
    var email2 = 'Alex@droneonyorkshire.com';

    $('.galleryid-20 .gallery-item:nth-of-type(1)').find('.gallery-icon').wrapInner('<a href="mailto:' + email1 + '"></a>');
    $('.galleryid-20 .gallery-item:nth-of-type(2)').find('.gallery-icon').wrapInner('<a href="mailto:' + email2 + '"></a>');

  }
})(jQuery);
  1. Update

Regards,
Kharis

Hello Kharis,

Thank you for your support, the images now load perfectly on the mobile & its great how the images link to the email!

Would it be possible to make the "alex@droneonyorkshire.com" and "david@droneonyorkshire.com" text appear as a clickable link in the same colour blue as the website?

Also the youtube video now runs on the desktop but the sound does not work.
The video appears at the top of the mobile version but it is not auto running and it is behind the logo.

Thank You again for your help,

Alex

You can add a link tag to your gallery image caption box.

   <a href="mailto:Alex@droneonyorkshire.com">Alex@droneonyorkshire.com</a>

49%20PM

To unmute the video header sound, add this code to Appearance > Custom JavaScript.

    jQuery(function($) {
        $('.wp-custom-header video').prop('muted', false);
    });

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 1024px) {
      #masthead.site-header.fixed {
        position: relative !important;
        height: 160px !important;
      }
    }

Regards,
Kharis

Hello Kharis,

The email link tags and the mobile screen now work perfectly, Thank You.

However the function code for custom Javascript doesn’t seem to unmute the sound. Do you know what could be the issue or is their another way to get the sound to work.

Thank You again for your support,

Kind Regards,
Alex

Hello Alex,

Please share your complete jQuery code to https://gist.github.com and share the link of it here, so I can reproduce it in my test site and troubleshoot the trouble.

Regards,
Kharis

Hello Kharis,

Here is the link of my whole JavaScript jquery:

Kind Regards,

Alex

Thank you for sharing Alex. Try replacing the last code that unmutes the video header

jQuery(function($) {
        $('.wp-custom-header video').prop('muted', false);
    });

to become like this:

    jQuery(function($) {

      $(window).on('load', function() {
        $('.wp-custom-header video').prop('muted', false);
      });

    });

Regards,
Kharis

Unfortunately the video is still muted, however thank you for getting back to me so quickly.

Do you have any other possible solutions,

Kind Regards,
Alex

I’ll be taking some more time inspecting into it again and will get back to you ASAP. Please be patience.

Regards,
Kharis

Hello Kharis,

I am just wondering if you have managed to find a possible solution for this issue or another code which might enable the sound,

Thank you again for your support,

King regards,

Alex