paulirish / lite-youtube-embed

A faster youtube embed.
https://paulirish.github.io/lite-youtube-embed/
Other
5.6k stars 259 forks source link

Custom Width and Height for Youtube shorts #158

Open cdo9 opened 9 months ago

cdo9 commented 9 months ago

Before using this package i was doing this :

<iframe loading="lazy" width="315" height="560"
    class="lazyload my-0 mx-auto"
    src="https://www.youtube-nocookie.com/embed/{{ $youtubeVideoId }}"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen=""></iframe>

Is it possible to do something similar for embedding youtube shorts ?

cdo9 commented 9 months ago

I found my answer alone, sorry :)

`

`

cdo9 commented 8 months ago

I reopen this cause my workaround is not doing exactly the same.

Wolfleader101 commented 7 months ago

bump any solutions for embedding shorts?

Milkywayrules commented 4 months ago

curious, I wanna try this library, but can we actually embed Shorts? Is your problem only with the styling and not the embedded Short functionality?

cc @cdo9

Wolfleader101 commented 4 months ago

curious, I wanna try this library, but can we actually embed Shorts? Is your problem only with the styling and not the embedded Short functionality?

cc @cdo9

Never got this library working so just stuck with standard iframes i.e

      <iframe
        width="315"
        height="560"
        src="https://www.youtube.com/embed/Ce1xtpew1Qo"
        title="YouTube video player"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media;
gyroscope; picture-in-picture;
web-share"
        allowfullscreen></iframe>

Works fine for me.

cdo9 commented 4 months ago

I am now doing this, but not using this package anymore, using this one : https://github.com/justinribeiro/lite-youtube - I don't remember why I've switched but it's working well for me like this :)

<div class="max-w-3xl mx-auto">
    @if($isVideoFormatPortrait)
        <lite-youtube videoid="{{ $youtubeVideoId }}" short></lite-youtube>
    @else
        <lite-youtube videoid="{{ $youtubeVideoId }}"></lite-youtube>
    @endif
</div>