Embed video in blog post

Jina
Excursionist
27 0 4

Hi, 

I am trying to add a youtube video to our blog post. 

I followed the instruction and embedded the video on post with this iframe code:

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

 

From the edit page seemed fine as well. 

Screenshot 2021-09-15 at 12.10.39.png

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

However, when I see the preview, the video appears very big on the top of the post. 

 

Screenshot 2021-09-15 at 12.11.33.png

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Is there a way to reduce the size of the video and place it between the text where I'd like to put it? 

 

I appreciate your time and help. 

Thanks,

Jina 

Replies 15 (15)
Jina
Excursionist
27 0 4
Hello,

Thanks for the answer.
Actually, I am trying to avoid to make it full screen, I'd like it to be
under the text and small.
Maybe removing allowfullscreen doesn't make it smaller?

Let me know, thank you so much.

Jina
Jina
Excursionist
27 0 4

Hello,

Thanks for the answer.
Actually, I am trying to avoid to make it full screen, I'd like it to be
under the text and small.
Maybe removing allowfullscreen doesn't make it smaller?

Let me know, thank you so much.

Jina

Choong_HueApps
Explorer
52 2 5

Hey Jina,

Can you try adding div (see below) at the beginning and ending of your Youtube embed code:

<div style="width:50%!important"><iframe...></iframe></div>

 

50% would be the width you want, you can customize this to be other sizes (by percentage / pixel). I have tested on my development blog and it should work:

Choong_HueApps_1-1631786878646.png

 

Better Blog posts discovery experience with Shopify Blog Posts & Articles Filter PRO | Setup blog article filters easily now with tags.
Jina
Excursionist
27 0 4

Hi, 

 

I updated the htmal to 

<div style="width:50%!important"><iframe width="560" height="315" src="https://www.youtube.com/embed/FRBure6USpE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe></div>

 

but I don't really see any changes on the website, so strange!

Do you know the reason why the video is on the top of the post (above the main image), instead of being between paragraphs? 

 

Thank you so much,

Jina 

Choong_HueApps
Explorer
52 2 5

Hmm you might have to contact your theme developer for support. Seems like there's some theme code overwriting what we have. 

Better Blog posts discovery experience with Shopify Blog Posts & Articles Filter PRO | Setup blog article filters easily now with tags.
Jina
Excursionist
27 0 4

Alright, thanks for your time and help! 

 

Jina