make youtube videos responsive

[Spartak]

make youtube videos responsive

Hi! <br />
not sure if this was covered or not. <br />
<br />
Recently I came up with the problem. <br />
Even using responsive theme when inserting youtube videos they were still not responsive and looked really bad on any mobile phone. <br />
<br />
Checking the code I've seen they are inserted using iframe with some certain width and height. <br />
<br />
So here is not ideal, but an easy fix I came up with <br />
<br />
Adding this code to your global.css<br />
<br />
<pre data-deferred="true" class="block-code line-numbers language-none"><code class="language-none">iframe {
width: 100%    !important;
max-width: 560px; !important;
  }</code></pre><br />
may look good on your mobile, but way too stretched  on desktop <br />
<br />
Hence I added<br />
<br />
max-width: 560px  - makes no difference on a mobile, but will not be overstretched on your desktop<br />
<br />
<br />
Hope this helps someone<br />
<br />
Please see before/after screen attached<br />
<br />
P.S bear in mind this will affect any iframe, not just youtube.<br /><!-- start: postbit_attachments_attachment -->
<br /><!-- start: attachment_icon -->
<img src="

Please, Log in or Register to view URLs content!

" title="JPEG Image" border="0" alt=".jpg" />
<!-- end: attachment_icon -->&nbsp;&nbsp;<a href="attachment.php?aid=43856" target="_blank" title="">Screenshot_20210225-234714.jpg</a> (Size: 713.86 KB / Downloads: 123)
<!-- end: postbit_attachments_attachment --><br /><!-- start: postbit_attachments_attachment -->
<br /><!-- start: attachment_icon -->
<img src="

Please, Log in or Register to view URLs content!

" title="JPEG Image" border="0" alt=".jpg" />
<!-- end: attachment_icon -->&nbsp;&nbsp;<a href="attachment.php?aid=43857" target="_blank" title="">Screenshot_20210225-235048.jpg</a> (Size: 509.73 KB / Downloads: 129)
<!-- end: postbit_attachments_attachment -->

Please, Log in or Register to view URLs content!