Jump to content
AndréPortuga

Selecting a iframe inside a textarea field

Recommended Posts

Does anyone knows if there is a way of selecting a iframe inside a textfield(using ckEditor)? 

I mean I have a Iframe with this code:

<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" scrolling="no" src="https://www.youtube.com/embed/PMaFJjZDrYM" width="100%"></iframe></p>
 

but it's not getting responsive in iPhones.. So anyone know how can I select it via code for making it responsive?

 

Thank you,

Share this post


Link to post
Share on other sites
7 minutes ago, AndréPortuga said:

Is there a way of changing the width and height with http://modules.processwire.com/modules/textformatter-video-embed/ ? 

 

Thanks

Did you read the configuration notes in the module's description 🙂

"You may want to update the max width and max height settings on the module configuration screen."

Share this post


Link to post
Share on other sites
8 minutes ago, adrian said:

Did you read the configuration notes in the module's description 🙂

"You may want to update the max width and max height settings on the module configuration screen."

I actually did.

But that makes all my videos be with that same width and height. That's not what I want.

 

Using the module:

image.png.1912b3d553949f7cbe6b1adc80f41030.png

Using Iframe: 

image.png.48bfcb55a6c11f6baab253790a71c142.png

Share this post


Link to post
Share on other sites

Are you embedded into a body of text that is wider than what you want the video to be?

If the video is on its own, I would recommend checking the responsive checkbox and outputting this field inside a div with the max width you want.

If not, then it might actually be easier to use the Hanna code module - then you can specify the url and width you want for each video separately, without the mess of trying to embed an iframe into an RTE field. Let us know if you decide to go this route and need help.

Share this post


Link to post
Share on other sites
1 hour ago, AndréPortuga said:

Yes I'am embedding into a wider body text. 

Then try the Hanna code approach and set up attributes for the video ID, and max width / height and wrap the iframe in a container. Google embed video responsively and you'll get tutorials on how the wrapping works.

You might end up with a shortcode format like this that lets you insert that into the RTE with the video ID and a max width and the Hanna code takes care of inserting these into the wrapper and iframe HTML.

[[video_embed id="" width="500"]]

 

 

image.png

  • Like 1

Share this post


Link to post
Share on other sites
24 minutes ago, adrian said:

Then try the Hanna code approach and set up attributes for the video ID, and max width / height and wrap the iframe in a container. Google embed video responsively and you'll get tutorials on how the wrapping works.

You might end up with a shortcode format like this that lets you insert that into the RTE with the video ID and a max width and the Hanna code takes care of inserting these into the wrapper and iframe HTML.

[[video_embed id="" width="500"]]

 

 

image.png

I actually solved as this way.

.internal-text iFrame {
            display: block;
            max-width: 100%;
            height: auto;
        }

where .internal-text is the class that I have in my div

<div class="internal-text">
                        <?php
                        $image = $page->cover_image;
                        echo "<img src='$image->url' style='width: 100%;'>"
                        ?>
                        <br>
                        <?php echo $page->body; ?>

Thank you so much

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By dragan
      On one particular site, CKEditor behaves rather weird:
      When I copy and paste "normally", i.e. CTRL + V, there is an alert popping up "do you really want to leave this page?". If you cancel, the text is pasted into the field. If not, you get redirected to the frontend of the page you just edited, and the changes are lost.
      The "paste from Word" button doesn't work. CTRL + SHIFT + V works, but all formatting is lost (apart from paragraphs).
      I'm using inline editor mode, ACF + Purifier are activated. I know that if I disable those two, CTRL + V works, but I won't do that, since CKE then saves all the garbage code from MS-Office.
      Has anyone ever come across this issue? I tried with Chrome + FF. No JS errors.
    • By AndZyk
      Hello,
      I am currently building a intranet which will be hosted on the local network of a company. This intranet has many links to files on their fileserver with the protocol file://.
      So for example the links look like this file://domain.tld/filename.ext
      When I try to insert such a link into a URL field, I get the error, that only the protocol http:// is allowed. When I try to insert such a link into a CKEeditor link, it gets stripped out. Is it possible to insert such links into the FieldType URL and CKEditor.
      I know that I could use a FieldType Text or insert a RewriteRule in the .htaccess file, but I am looking for a more elegant solution. 😉
      Regards, Andreas
    • By prestoav
      Hi folks.
      I'm building a Formbuilder form to create new advert pages in a marketplace. Formbuilder is ideal for this. I need to add a description field that allows text to be added with line breaks etc. so showing a CKEditor field would be ideal (i.e. exactly like the field I'm typing into right now)!.
      Does anyone know if it's possible to add a CKEditor field to the front end presentation fo a Formbuilder field, maybe via a module or such?
      Many thanks!
    • By Roberts R
      Hello.
      I never though about it before but when I insert image into CKeditor field I don't get ALT tag filled from image that has it. Do I have to do it manualy for inserted image or Im doing something wrong?
       
    • By Robin S
      If you've ever needed to insert links to a large number of files within CKEditor you may have found that the standard PW link modal is a somewhat slow way to do it.
      This module provides a quicker way to insert links to files on the page being edited. You can insert a link to an individual file, or insert an unordered list of links to all files on the page with a single click.
      CKEditor Link Files
      Adds a menu to CKEditor to allow the quick insertion of links to files on the page being edited.

      Features
      Hover a menu item to see the "Description" of the corresponding file (if present). Click a menu item to insert a link to the corresponding file at the current cursor position. The filename is used as the link text. If you Alt-click a menu item the file description is used as the link text (with fallback to filename if no description entered). If text is currently selected in the editor then the selected text is used as the link text. Click "* Insert links to all files *" to insert an unordered list of links to all files on the page. Also works with the Alt-click option. Menu is built via AJAX so newly uploaded files are included in the menu without the page needing to be saved. However, descriptions are not available for newly uploaded files until the page is saved. There is an option in the module config to include files from Repeater fields in the edited page. Nested Repeater fields (files inside a Repeater inside another Repeater) are not supported. Installation
      Install the CKEditor Link Files module.
      For any CKEditor field where you want the "Insert link to file" dropdown menu to appear in the CKEditor toolbar, visit the field settings and add "LinkFilesMenu" to the "CKEditor Toolbar" settings field.
       
      http://modules.processwire.com/modules/cke-link-files/
      https://github.com/Toutouwai/CkeLinkFiles
×
×
  • Create New...