Shopify themes, liquid, logos, and UX
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.
However, when I see the preview, the video appears very big on the top of the post.
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
Please share store URL
Thanks!
This is our store URL.
But you won't see the huge video on the blog post, I removed it since the blog post is not hidden.
Let me know if you need anything else, thank you!
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
Please add vedio your blog page and share link
Thanks!
can you please sent url blog
Hi Jina,
Can you try removing the "allowfullscreen" at the end of the embed code and see if it works?
Screenshot below for your reference.
Note: Please mark this as solution if it works.
This attribute is considered a legacy attribute and redefined as allow="fullscreen".
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
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:
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
Hmm you might have to contact your theme developer for support. Seems like there's some theme code overwriting what we have.
Alright, thanks for your time and help!
Jina
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024