يوتيوب , Vimeo غيرها من مواقع مشاركة الفيديوهات تسمح بالحصول على embed للفيديو لتضمينه في موقعك كما في الصورة التالية لكن المشكلة أنها غير متجاوبة
سنحصل على كود مثل هذا
<iframe width="560" height="315" src="https://www.youtube.com/embed/mjwLrR9wcl4" frameborder="0" allowfullscreen></iframe>
أضفه داخل هذا الـ Div
<div class="videoresp">
</div>
<div class="videoresp">
<iframe width="560" height="315" src="https://www.youtube.com/embed/mjwLrR9wcl4" frameborder="0" allowfullscreen></iframe>
</div>
والآن الخطوة الأخيرة أضف هذا الكود لملف الـ Css
/* Start Mobarmejoun Responsive Video */
.videoresp {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
overflow: hidden;
max-width: 100%;
height: auto;
margin: 20px auto;
}
.videoresp iframe, .videoresp object, .videoresp embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* End Mobarmejoun Responsive Video */
روابط قد تهمك :
قوقل: أكثر من نصف عمليات البحث من خلال الهواتف الذكيةإهتمو بجعل الموقع متجاوب مع بقية الأجهزة :)--مراجع مفيدية...
Posted by مبرمجون on Thursday, October 8, 2015
