Featured Video – Wrong layout

Hi Lysefjordcam,

Is the original video 4:3 or 16:9 format? It may be a case that your video is not the same ratio of width x height as your layout area.

Hey Morten,

Can you try adding this CSS and let me know if it helps?

#page-id-739 .featured-video .fluid-width-video-wrapper {
  padding-top: 56.5% !important;
}

Liam Dempsey: The original video is 16:9 aspect (1280x720p).
https://www.youtube.com/watch?v=tNceEFuBAqc
———————————————————————-

Hey Ben,
I’ve added the css to the Tracks-child theme (style.css), but it had no effect.
I also cleared my browsers cache to see if that helped after the new css, but still no change.
I also removed a youtube autoplay custom code you helped me with some time ago.
I see that you’ve added a autoplay feature in your latest update. Thanks ??

All the best
Lysefjordcam
Morten Haugen

• This reply was modified 8 years, 2 months ago by Lysefjordcam.
• This reply was modified 8 years, 2 months ago by Lysefjordcam. Reason: additional information
• This reply was modified 8 years, 2 months ago by Lysefjordcam.

Hi Ben,
Not sure if this can be of any help.
I found some embed code on the net and tested it on my YT stream.
You can see the test page here:
https://home.holhaug.com/test/
As you can see the layout/aspect looks good on this embedded test.

All the best
Lysefjordcam
Morten Haugen

Thanks for trying that.

It’s so strange, I can recreate the same issue when I use that video as a Featured Video, but every other Youtube video I try works fine. I tried some other live streams too, and the only difference I see with your video and the others is the thumbnail that shows before the video plays. The video on your site has a custom thumbnail while the others I checked have one taken from the feed. I think the thumbnail image may somehow be affecting the ratio and the script that resizes the video.

Could you try removing the thumbnail temporarily on the video to check if this helps?

Hi Ben,
Thanks for getting back to me. I tried to remove the thumbnail, but I did not find an option for it.
It looks like its not possible?!; I can only change it not remove it. I did however try different thumbnails with different resolution/aspects, but it did not help on the issue. This is really strange. At the same time it strange that the in the embedded test i did it looks ok.

All the best
Lysefjordcam
Morten Haugen

Okay I have good news and bad news.

I’ve tracked the bug down to an error with the oEmbed feature in WordPress used to embed videos with their URL. The bad news is I’m still not sure how to fix it.

The good news is that I made a mistake with the previous CSS, and the following should work instead:

.page-id-739 .featured-video .fluid-width-video-wrapper {
  padding-top: 56.25% !important;
}

?? What the difference a single char can do. That did it. Excellent.
Thanks a lot again Ben and good luck finding a fix on your newly discovered bug.

All the best
Lysefjordcam
Morten Haugen

Sure thing, glad I could help!