View Issue Details

IDProjectCategoryView StatusLast Update
0006712module Visual CMSmodule Visual CMS - subpublic2021-04-14 14:06
Reporterstroebjo Assigned To 
PrioritylowSeverityfeatureReproducibilityalways
Status resolvedResolutionfixed 
Fixed in Version3.5.0 
Summary0006712: VisualCMS Responsive Video embed
DescriptionInside the VisualCMS Text element you can add a YouTube etc. Video into your element.

The Video embed code is generated by the VisualCMS JavaScript. It puts the iframe directly inside the DOM with fixed width/height. The embedded video will not scale to adapt smaller screens.

I would suggest to add an additional div wrapper around it, so the classic "responsive video embed" fix can be used [0].

I would also suggest to put descriptive classes on this div node, like class "video-embed video-embed {youtube|vimeo }".

[0]: http://www.holgerkoenemann.de/ein-vimeo-oder-youtube-video-responsive-einbinden/
TagsNo tags attached.
Attached Files
Widget-Text.png (21,210 bytes)   
Widget-Text.png (21,210 bytes)   
rwdvideo.php (1,323 bytes)   
<?php

class rwdvideo_shortcode extends ddvisualeditor_shortcode
{
	protected $_sTitle = 'PBI_VISUAL_EDITOR_SHORTCODE_RWDVIDEO';

	protected $_sBackgroundColor = '#648AA7';

	protected $_sIcon = 'fa-video-camera';


    public function install()
    {
        $this->setShortCode( basename( __FILE__, '.php' ) );

        $oLang = oxRegistry::getLang();

        $this->setOptions(
			array(
                'url'         => array(
                    'type'    => 'text',
                    'label'   => $oLang->translateString( 'PBI_VISUAL_EDITOR_SHORTCODE_RWDVIDEO_URL' ),
                    'preview' => true
				),
			)
        );
	}

    public function parse( $sContent = '', $aParams = array() )
    {
        $oConfig = $this->getConfig();
		$html = null;

		if (preg_match('/youtube/', $aParams['url'])) {
			$embed_yt = '<div class="m-videoembed m-videoembed--youtube">
				<iframe class="m-videoembed-video" width="%s" height="%s" src="https://www.youtube-nocookie.com/embed/%s" frameborder="0" allowfullscreen></iframe>
			</div>';

			parse_str( parse_url( $aParams['url'], PHP_URL_QUERY ), $my_array_of_vars );
			$yt_id = (isset($my_array_of_vars['v'])) ? $my_array_of_vars['v'] : null;


			var_dump($yt_id);

			$html = sprintf($embed_yt,
				560,
				315,
				$yt_id
			);
		}

		return $html;
    }
}
rwdvideo.php (1,323 bytes)   

Activities

QA

2017-10-18 15:26

administrator   ~0012245

The code for embedding a video is a template which you could change to your needs by using the source code view in the text widget and also in the CMS overview. Screenshots added.

stroebjo

2017-10-18 15:43

reporter   ~0012246

I'm well aware that I can paste any custom video embed code into the code view, nevertheless none of my clients want's to be bothered with editing HTML. If they would be willing and capable of doing that I would not need the VisualCMS.

Since the VisualCMS claims to be responsive AND provides a button to include video embeds by URL (three buttons to the left from the code view in the WYSISWYG) I think it should be added automatically by the VisualCMS editor.


Nevertheless, in my case I added a new shortcode for the VisualCMS for videos. This could be further extended to include Privacy mode etc. I attached the file.

QA

2017-10-18 16:04

administrator   ~0012247

Thank you for your hint.