- This topic has 6 replies, 2 voices, and was last updated 3 years, 10 months ago by
.
-
Posts
-
Hello,
I was just successfully able to have YouTube videos show up in my elements (i.e. blocks) using the php snippet that Tom recommended (https://generatepress.com/forums/topic/youtube-embed-works-fine-in-admin-panel-shows-only-url-on-live-site/page/2/) at my https://campfirepark.org website. However, my new problem is this: The YouTube videos and playlist look great on the desktop. However, on mobile the videos appear on the screen as being “long and skinny” (and cut off at the edges). Once you click them to play, they play at their normal rectangular size, but in a larger high-rise building shaped black box.
Here’s an example: https://campfirepark.org/ranger-days/
Here’s another example: https://campfirepark.org/campfire-at-muscovy-lake/I found a work-around using the YourChannel plugin for single videos, however it doesn’t work with playlists. I also found a workaround for playlists (using an iframe) but it’s less than ideal because I have to shrink the video on desktop to have it look semi-normal on mobile.
Do you you have any idea why the mobile version of the native YouTube embedder is showing up long and skinny? And is there a way to correct it?
Thank you,
Bob
P.S. I’m using the same GP Premium theme for my https://bobbyangel.org site and all the videos show up normal on mobile. My videos also show up normal on my https://gohydrology.org website. I’m not sure why they show up so “vertically long” and “truncated” at http://campfirepark.org
Customer Support
Hi Bob,
I see.
“When we embed videos from services like YouTube and Vimeo, the videos come inside an iframe and are usually not responsive. The width of the video is confined to the width of the container, but the height never changes causing it to be very tall and not so wide.”
You’ll need to follow this: https://docs.generatepress.com/article/responsive-videos/
Alternatively, here’s another solution provided by another customer: https://generatepress.com/forums/topic/lightweight-grid-columns-youtube-height-values-not-set-automatically/#post-455249
Hope this helps!
Hey Fernando, I tried both solutions and neither changed the dimensions of how my YouTube videos are rendered in mobile. My videos continue to be cut off on both sides, just showing the middle third, although they play fine. Can you think of anything else? And why do my videos show up perfectly in my Go Hydrology (https://gohydrology.org) and Bobby Angel (https://bobbyangel.org) sites. I’m baffled why this is an issue on Campfire Park (https://campfirepark.org) and not the other sites. Thanks again for your help, Bob
I can’t seem to see the solutions applied. For instance, the video in this link still doesn’t have the class videoWrapper as stated in the solution: https://campfirepark.org/ranger-days/
Can you try clearing your cache?
As for the other sites, if you use a YouTube embed block, you’ll have the option to resize for smaller devices which in turn keeps its aspect ratio: https://share.getcloudapp.com/jkuXJRZb
Hope this clarifies!
Hey Fernando,
Here’s an update:
(1) The <video-wrapper> method marginally worked, but it still cut off the sides of the video, thus in scrolling through the site, the user is still unable to see the full rectangle of the YouTube video on mobile. Below are the two links where I applied it.
https://campfirepark.org/in-a-funk/
https://campfirepark.org/ranger-days/One additional note on both mobile versions: On the desktop version, the text under the videos is centered, but on mobile it is aligned left. I have no idea why.
(2) I tried but did not succeed in getting the “alternative solution” developed by another customer to work. I added the php snippet and I added the additional CSS but the videos still show up as enlarged (or rather, not fit to the page) on mobile.
(3) I double checked, and yes, on my YouTube Embed blocks, I have the toggle button set to “resize for smaller devices.”
Fernando, I’m very interested in solving this problem. The whole purpose of my website is to provide video using the phone as a conduit. The fact that the videos are so enlarged and cut off in the mobile version greatly diminished the experience. Also, I am very confused, and still don’t understand why the mobile version of my YouTube embeds work perfectly at my https://gohydrology.org and https://bobbyangel.org websites, but are so distorted at https://campfirepark.org. At Go Hydrology and Bobby Angel, I simply cut and paste the YouTube link and they appear perfectly on the desktop and mobile.
Thus my two questions:
(1) Why is there a difference between my three sites with regard to how YouTube embeds appear in mobile?
(2) Is there anything I can globally reset in Campfire Park to fix the problem? Or any other ideas?Thanks again for all your help,
Bob
Fernando, I seem to have figured this out. In in a fit of I’ll try anything to fix this, I cleared the cache and then deactivated every plugin that wasn’t core. I think it had something to do with an Envira Plugin add on. Whatever the case, both the videos and playlists using the native YouTube embedder are showing up as fully responsive. Interestingly, it’s now the <video-wrapper> embeds that aren’t showing up right, so I’m going back and replacing them with the simple approach. This #*&! WordPress (pardon my french), it’s going to be the end of me yet. Just glad to have solved this. Thanks so much for your help. Bob
You’re welcome! Glad it’s working now Bob! Indeed, caching and optimization ironically can sometimes really be a pain!
- You must be logged in to reply to this topic.
