-->
banner
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- %u0627%u0639%u0644%u0627%u0646 %u0633%u0627%u064A%u062F %u0628%u0627%u0631 %u0627%u0644%u062A%u0631%u062C%u0645%u0627%u0646 1 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4530581304513824" data-ad-slot="7885475094" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>

السبت

طريقة تضمين الفيديو متجاوبا مع جميع أحجام الشاشات والموبايل

طريقة تضمين الفيديو متجاوبا في مدونة بلوجر

تحتوي هذه المقالة على ما يلي

سنتعرف اليوم على طريقة تضمين فيديو مع ميزة التجاوب للهواتف المحمولة ليظهر الفيديو بشكل جيد على جميع أحجام الشاشات، وخصوصا على شاشة الموبايل أو التابلت. لتطبيق ذلك أضف الكود التالي قبل كود تضمين كل فيديو:

<style type="text/css">
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>
<br />
<div class="video-container">
الموضوع التالى الموضوع التالى
الموضوع السابق الموضوع السابق
الموضوع التالى الموضوع التالى
الموضوع السابق الموضوع السابق
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- %u0627%u0639%u0644%u0627%u0646 %u0633%u0627%u064A%u062F %u0628%u0627%u0631 %u0627%u0644%u062A%u0631%u062C%u0645%u0627%u0646 1 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4530581304513824" data-ad-slot="7885475094" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
 

الاستضافة بواسطة فيدبورنر