(2023-12-19, 07:31 AM)Joey_Pham423 Wrote: [ -> ]try adding this css to your global.css or wherever you want:
iframe {
width: 100%;
max-width: 800px; /*this can be anything you wish, to show, as default size*/
aspect-ratio: 16/9; /*important to keep the aspect ratio*/
}
Remove the width and height option in your Regular Expression
\[iframe\](.*?)\[/iframe\]
Change your replacement to just accepting the url
<iframe src="$1" allowfullscreen></iframe>
Play around with the css to your liking. Let me know if this works for you
Please note that the content inside the iframe also has to be responsive as well
code on global.php gives error
please read carefully what others write to you
global.CSS not global.PHP
If a video is posted from SCEditor using the video dropdown, the resulting mycode in the post would be something like
[video=youtube]https://youtu.be/b6FhOb7-1dg[/video]
When the post is parsed for display, it runs through the video_youtube_embed template in the Video MyCode Template group.
<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/{$id}" frameborder="0" allowfullscreen="true"></iframe>
It seems you would want to define a css class and declare it in the template while removing the fixed width and height.
That would answer the OP's question and avoid unintended consequences messing with all iframes.
Untried, not tested.
(2023-12-19, 12:08 PM)HLFadmin Wrote: [ -> ]If a video is posted from SCEditor using the video dropdown, the resulting mycode in the post would be something like
[video=youtube]https://youtu.be/b6FhOb7-1dg[/video]
When the post is parsed for display, it runs through the video_youtube_embed template in the Video MyCode Template group.
<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/{$id}" frameborder="0" allowfullscreen="true"></iframe>
It seems you would want to define a css class and declare it in the template while removing the fixed width and height.
That would answer the OP's question and avoid unintended consequences messing with all iframes.
Untried, not tested.
This doesn't make the video player responsive, which is what the OP is asking
(2023-12-19, 01:23 PM)jkcool Wrote: [ -> ] (2023-12-19, 07:31 AM)Joey_Pham423 Wrote: [ -> ]try adding this css to your global.css or wherever you want:
iframe {
width: 100%;
max-width: 800px; /*this can be anything you wish, to show, as default size*/
aspect-ratio: 16/9; /*important to keep the aspect ratio*/
}
Remove the width and height option in your Regular Expression
\[iframe\](.*?)\[/iframe\]
Change your replacement to just accepting the url
<iframe src="$1" allowfullscreen></iframe>
Play around with the css to your liking. Let me know if this works for you
Please note that the content inside the iframe also has to be responsive as well
Worked. Thanks!
Glad I could help
