كيفية جعل استجابة أو قابل للتعديل, العرض الكامل, فيديو مضمن من يوتيوب

إذا من أي وقت مضى إدراج أ فيديو من يوتيوب وفي بعض الخاصة بك مواقع ويب ربما لاحظتم أن شريط الفيديو عرض ثابت وليس هذا استجابة عندما تقوم بتغيير الحجم في المستعرض، أو عندما تشاهد صفحات الويب الخاصة بك من الآخرين أجهزة مع الأحجام المختلفة للشاشة (موبايل, أقراص,…).

رأينا في المقال السابق كما يمكن إدراج فيديو يوتيوب مباشرة إلى صفحة الويب الخاصة بك, وإذا كنت تستخدم وورد, دون أي نوع من أنواع البرنامج المساعد.

للقيام بذلك العرض من فيديو إدراج, من التعليمات البرمجية إتش تي أم ال أن موقع يوتيوب لنا دا, هو استجابة, أول شيء سنقوم بوضع هذه التعليمات البرمجية داخل DIV.

<div class="contenedor">
   <iframe src="https://www.youtube.com/embed/NUsoVlDFqZg" 
           frameborder="0" 
           allowfullscreen="allowfullscreen" 
           class="video">
   </iframe>
</div>

frameborder="0"

allowfullscreen="allowfullscreen"

class="video">

</iframe>

</div>

يمكنك استخدام مدونة يظهر هنا, و استبدال على الطريق على طول الطريق التي تعطيها يوتيوب شريط الفيديو الذي تريد إدراج. يرجى ملاحظة أنه يجب تعيين الفئة فيديو للعنصر IFRAME.

ثم, في الملف الخاص بك CSS المقابلة, أو مباشرة على عنصر نمط في نفس الصفحة, نحن ذاهبون إلى تعيين سمات النمط للفئة حاوية و فيديو.

.contenedor {
   position: relative;
   height: 0px;
   width: 100%;   
   padding-bottom: 56.25%;
}

.video {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
}

.contenedor {

position: relative;

height: 0px;

width: 100%;

padding-bottom: 56.25%;

}

.video {

position: absolute;

top: 0px;

left: 0px;

width: 100%;

height: 100%;

}

متى تم إدخال هذا الرمز, إذا كان قم بتحديث مرة أخرى الصفحة حيث قمت بإدراج الفيديو, تحقق وهذا الآن يضبط لأن العرض لأن DIV أنه يحتوي على. نعم الشرق DIV ويقع مباشرة فوق الهيئة, سوف ترى أنه إعادة تعيين لأن عرض الشاشة.