22 عاماً، مصمم ومطور واجهات أمامية، مصمم ومطور قوالب بلوجر حالياً فى بلوجر بالعربى، أسعى للعمل فى شركة تطوير ويب مصرية

السلام عليكم ورحمة الله وبركاته

موضوع اليوم يؤرق الكثير من المدونين خاصة الذين يعتمدون على يوتيوب فى تقديم محتوى مرئى، المشكلة هى تجاوب الوحدات المضمنة من مواقع الفيدوهات مثلاً يوتيوب والسبب فى ذلك هى عندما تقوم بتضمين فيديو من يوتيوب يكون الفيديو بمقاس محدد هذا المقاس المحدد يسبب مشاكل فى الشاشات الصغيرة خاصة للهواتف الذكية والحاسوب اللوحى

المشكلة طبعاً لها حل وهو موقع embedresponsively.com ولكن هذا الحل ليس بعملى خاصة اذا كنت قد دونت الكثير من التدوينات واعاده تركيب الوحدات المتجاوبة سيكون امراً مرهقاً او مستحيلاً عند البعض

الحل جافا سكريبت

أستخدمنا جافا سكربيت فى برمجة دالة تقوم بحل المشكلة بناء على تحديد الوحدات المضمنة والكشف عن نوعها وحل المشكلة اذا وجدت الداله ان هذة الوحدة المضمنة هى فيديو من يوتيوب او غيره

Pure JavaScript No jQuery

للدمج فى موقعك او مدونتك

يتم ذلك على مرحلتين
اولا أضف هذا الكود فى وسم <head> ولمستخدمى قوالبى ستجده بهذا الشكل &lt;head&gt;

<script>/* <![CDATA[ */
function SetVideoIframeRespinsive(e) {
    var d = document,
        t = function() {
            if (e) {
                if ("#" == e.substring(0, 1)) {
                    return d.getElementById(e.substring(1));
                } else if ("." == e.substring(0, 1)) {
                    return d.getElementsByClassName(e.substring(1))[0]
                }
            } else {
                return d.body;
            }
        },
        i = t().getElementsByTagName("iframe"),
        n = 0;
    if (i) {
        for (; n < i.length; n++) {
            if ("undefined" != typeof i[n].attributes.src) {
                var r = i[n].getAttribute("src");
                if (-1 != r.indexOf("youtube.com") || -1 != r.indexOf("youtube-nocookie.com")) {
                    var o = d.createElement("div");
                    o.setAttribute("style", "position:relative;padding-top:56.28%;display:block");
                    o.innerHTML = '<iframe style="position:absolute;top:0;right:0;width:100%;height:100%" src="' +
                        r + '" frameborder="0" allowfullscreen=""></iframe>';
                    i[n].parentNode.replaceChild(o, i[n]);
                }
            }
        }
    }
}
/*]]>*/</script>

ثانياً مرحلة تفعيل الكود او أطلاقة ان صح المعنى
لجعلة يعمل على اى فيديو داخل موقعك او مدونتك يكون عبر الكود التالى

<script>/* <![CDATA[ */
  SetVideoIframeRespinsive();
/*]]>*/</script>

ولمستخدمى بلوجر يكون عبر الكود التالى

<script>/* <![CDATA[ */
  SetVideoIframeRespinsive("#Blog1");
/*]]>*/</script>

واذا اردت ان يعمل الكود على عنصر محدد فى موقعك

<script>/* <![CDATA[ */
SetVideoIframeRespinsive("#element-width-id");  /* func support id  */
SetVideoIframeRespinsive(".element-width-class"); /* func support class  */
/*]]>*/</script>

كود المرحلة الثانية يضاف قبل اغلاق وسم </body> مباشرة ولمستخدمى قوالبنا سيكون الوسم بهذا الشكل &lt;/body&gt;

الحمد لله انتهى الشرح، نسائلكم الدعاء
واذا استصعب عليك امر تواصلنا بالتعليقات

موضوعات ذات صلة
التعليقات
هل شاهدت أحدث قوالبنا