Youtube video Embeding is cropped from sides on Mobile devices

Help
1

Hello Jekyll Family,

I am new to this framework and I am trying to embed a youtube video with the following code. Youtube video thumbnail gets cropped on mobile devices. However, on a laptop, it works just as fine. Kindly tell me how to resolve this issue. Please see the screenshot attached below.!

WhatsApp Image 2021-04-09 at 1.50.37 AM|240x500

2

Actually, I do not think it is the browser. At least not on my tests. Instead, I think it is the hover code you have that expands the size when you hover over the content.

Before hovering (looks good!):

Screen Shot 2021-04-09 at 5.39.45 PM
Screen Shot 2021-04-09 at 5.39.45 PM690×1176 203 KB

After hovering (cropped):

Screen Shot 2021-04-09 at 5.39.54 PM
Screen Shot 2021-04-09 at 5.39.54 PM692×1182 183 KB

3

Hello BillRaymond,

Thank you so much for the reply. The main problem is with the post page but not the main page. Maybe you can test it on the following link:

Thank you very much again. Waiting for your response.

Best,
Ali

4

If you love my idea and solution
watch demo here at this link

please let me know, i will give you some hint and guide on modify the source code by hardly use google translate. im not good at english sorry.