<?xml version="1.0"?>
<rss version="2.0"><channel><title/><link>https://opencartforum.com/en/blogs/149-zametki-na-polyah/</link><description/><language>en</language><item><title>&#x410;&#x434;&#x430;&#x43F;&#x442;&#x438;&#x432;&#x43D;&#x43E;&#x435; YouTube &#x432;&#x438;&#x434;&#x435;&#x43E; &#x441; iframe.</title><link>https://opencartforum.com/blogs/entry/199-adaptivnoe-youtube-video-s-iframe/</link><description><![CDATA[
<p>
	HTML:
</p>

<pre class="ipsCode prettyprint lang-html prettyprinted">
<span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"video"</span><span class="tag">&gt;</span><span class="pln">
	</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"videoWrapper"</span><span class="tag">&gt;</span><span class="pln">
		</span><span class="tag">&lt;iframe</span><span class="pln"> </span><span class="atn">width</span><span class="pun">=</span><span class="atv">"560"</span><span class="pln"> </span><span class="atn">height</span><span class="pun">=</span><span class="atv">"315"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"https://www.youtube.com/embed/Zph3K-----"</span><span class="pln"> </span><span class="atn">frameborder</span><span class="pun">=</span><span class="atv">"0"</span><span class="pln"> </span><span class="atn">allow</span><span class="pun">=</span><span class="atv">"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"</span><span class="pln"> </span><span class="atn">allowfullscreen</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;&lt;/iframe&gt;</span><span class="pln">
  	</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></pre>

<p>
	 
</p>

<p>
	CSS:
</p>

<pre class="ipsCode prettyprint lang-css prettyprinted">
<span class="pun">#</span><span class="pln">video </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">max-width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">560px</span><span class="pun">;</span><span class="pln">
    </span><span class="kwd">margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> auto</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">.</span><span class="pln">videoWrapper </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">position</span><span class="pun">:</span><span class="pln"> relative</span><span class="pun">;</span><span class="pln">
    </span><span class="kwd">padding-bottom</span><span class="pun">:</span><span class="pln"> </span><span class="lit">56.25%</span><span class="pun">;</span><span class="pln">
    </span><span class="kwd">padding-top</span><span class="pun">:</span><span class="pln"> </span><span class="lit">25px</span><span class="pun">;</span><span class="pln">
    </span><span class="kwd">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">.</span><span class="pln">videoWrapper iframe </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">position</span><span class="pun">:</span><span class="pln"> absolute</span><span class="pun">;</span><span class="pln">
    </span><span class="kwd">top</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln">
    </span><span class="kwd">left</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln">
    </span><span class="kwd">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100%</span><span class="pun">;</span><span class="pln">
    </span><span class="kwd">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100%</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span></pre>

<p>
	 
</p>

<p>
	 
</p>

<p>
	 
</p>
]]></description><guid isPermaLink="false">199</guid><pubDate>Wed, 20 Mar 2019 17:19:00 +0000</pubDate></item></channel></rss>
