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

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

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

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

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

    • werdnags
      By werdnags+
      Evening All,
      Can anyone help me please?  I am trying to insert an iframe to wrap another website.  I have tried using the 'text' and 'embed' section and insert the code:
      <iframe src="website-address"></iframe> When I save the page it then returns blank, nothing at all, not even the tool bars for pagelines.  I don;t know how to disable that section so I am having to just delete the page and create a new one with a different name.
      Thanks for any help.
    • cstudio
      By cstudio
      Hello,
      I need some help!  I am trying to add a Square booking script.  When I add it to a embed section it crashes the page editor and I am unable to save the page version.  I have tried using different browsers with the same result.
       I can add the script on the backend in the word press content area and get it to show and work, but it look terrible.  A page with in a page.  http://www.zoeanastacia.com/booking/.
      I need help getting the page editor to work properly or to make the wp content section to not look like an 90's iframe.
      Thanks
    • 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
×