Jump to content

Archived

This topic is now archived and is closed to further replies.

ketri

How can I have a responsive youtube-embed inside a modal?

Recommended Posts

ketri    7
ketri

Hi!

When I insert a youtube-embed inside a modal, it won't work. I tried to have:

 

 <div class=" fitvids">
        <iframe  src="//www.youtube.com/embed/88NV75YRAnc?&iv_load_policy=3&theme=light&color=red&rel=0&showinfo=0&autohide=1&enablejsapi=1" frameborder="0"  allowfullscreen></iframe>
      </div>

But that won't work on mobile either.

Thank you!

 

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

 

Why won't it work ? I have just added the following to a modal shortcode and it works, but the modal body classes needs its height via CSS adjusting.

 

[pl_modal title="Title" type="btn" colortype="info" label="Click Me!"]<div class=" fitvids"><iframe src="//www.youtube.com/embed/88NV75YRAnc" frameborder="0" allowfullscreen></iframe></div>[/pl_modal]


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Yeah, I mentioned above you have to change the height of the modal via CSS.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
ketri    7
ketri

Ahh, apologies. 
It would of course be better if it would work without such customization, since it means either tons of media queries or black bars in several screen sizes. But I'd assume this is the default bootstrap modal as it is. 
Thanks

Share this post


Link to post
Share on other sites

  • Similar Content

    • pehja
      By pehja+
      https://pehjaproduction.se/webbdesign/  Video is not showing up in Journey section. Why? I have entered this in the settings 
       
    • dougalperman
      By dougalperman+
      Hi there,
      I'm a big fan of Pagelines, and have been for years.
      I'm trying to control the size of video embeds and having some difficulty. I see that I can just paste the Vimeo video URL into the post and an embed widget will automatically appear, which is great. But the embed box created is much taller that the video (689 x 1000 pixels) so the content sits in the middle of a tall black box, which looks awkward.
      I tried using the full iFrame embed code from Vimeo, which solved the disproportionate embed frame size (or aspect ratio) issue, but despite specifying the dimensions I want (690 x 388), the videos displayed on the post are sized at 300 x 150 pixels.
      I can't work out how to change either.
      I'm using the latest version of Pagelines Framework (Pro) with the Agency them.
      Any help or advice very much appreciated.
      Thanks,
      Dougal
    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      I have been trying unsuccessfully to center my social media bar that I embedded into an "embed" section. Regular text and links are centered based on the alignment setting of the section but I can't get the social icons to center. Any clue what CSS snippets could do the trick?
      Site in questions: www.michaelkummer.com
      Thanks
      Michael

    • Lisa Haran
      By Lisa Haran+
      Hi 
      I have a map here http://www.iloveoffset.com/maps/
      I want to add several pointer locations to the map, but when I do they do not appear.
      On this map there are 2 pointer locations and as you can there is only one visible.
      Earlier today I added 7 and could only see 4 so there is something odd going on.
      My theme is up to date
×